无法使用 jsPlumb 使 div 可拖动

Question

有：jquery2.1.3，chrome

以下代码显示 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:

jQuery UI 1.7.x 或更高版本（如果您希望支持拖放）。始终记得检查您使用的 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:

您必须对要拖动的元素设置 position:absolute。这样做的原因是所有库都通过操纵元素的 style 属性的 left 和 top 属性来实现拖动。

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

无法使用 jsPlumb 使 div 可拖动

Unable to make divs draggable with jsPlumb

javascript

jsplumb