有:jquery 2.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>
最佳答案
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>
您必须在想要可拖动的元素上设置 position:absolute。这样做的原因是，所有库都通过操作元素的 style 属性的 left 和 top 属性来实现拖动。
.drag-me {
position: absolute;
width: 230px;
...
}
关于javascript - 无法使用 jsPlumb 使 div 可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29313218/