无法使用jsPlumb使div可拖动

Question

have: jquery 2.1.3, chrome 有：jQuery 2.1.3，chrome

the following code displays 2 divs, connect them (so jsPlumb does work), but the divs are non draggable. 以下代码显示2个div，将它们连接起来（以便jsPlumb起作用），但是div是不可拖动的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .drag-me {
            width: 230px;
            height: 250px;
            margin: 15px;

            background-color: #29e;
            color: white;

            border-radius: 1em;
            padding: 20px;

            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }

        .drag-me::before {
            content: "#" attr(id);
            font-weight: bold;
        }

        .tg  {border-collapse:collapse;border-spacing:0;border-color:white;margin:0px auto;}
        .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;border-top-width:1px;border-bottom-width:1px;}
        .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;border-top-width:1px;border-bottom-width:1px;}


    </style>
</head>
<body>

<div class="drag-me" id="draggable1"></div>
<div class="drag-me" id="draggable2"></div>



</body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jsPlumb/dist/js/jquery.jsPlumb-1.7.4.js"></script>

<script>

    jsPlumb.ready(function() {
        jsPlumb.draggable($("#draggable1"));
        jsPlumb.draggable($("#draggable2"));
        jsPlumb.connect({source:"draggable1", target:"draggable2"});

    });


</script>
</html>

Answer 1

1. Required Imports: 1.所需进口：

jQuery UI 1.7.x or higher (if you wish to support drag and drop). jQuery UI 1.7.x或更高版本（如果您希望支持拖放）。 Always remember to check that the versions of jQuery and jQuery UI you are using are compatible. 始终记得检查您使用的jQuery和jQuery UI版本是否兼容。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="PATH_TO/jquery.jsPlumb-1.7.4-min.js"></script>

2. Required CSS: 2.所需的CSS：

You must set position:absolute on elements that you intend to be draggable. 您必须在要拖动的元素上设置position:absolute 。 The reasoning for this is that all libraries implement dragging by manipulating the left and top properties of an element's style attribute. 这样做的原因是，所有库都通过操纵元素的style属性的left和top属性来实现拖动。

.drag-me {
    position: absolute;
    width: 230px;
    ...
}

无法使用jsPlumb使div可拖动

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-28 18:20:58

无法使用jsPlumb使div可拖动

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-28 18:20:58

解决方案1
1 已采纳 2015-03-28 18:20:58