Unable to make divs draggable with jsPlumb
Question
have: jquery 2.1.3, chrome
the following code displays 2 divs, connect them (so jsPlumb does work), but the divs are non draggable.
<!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>
1 answers
solution1
1 ACCPTED 2015-03-28 18:20:58
jQuery UI 1.7.x or higher (if you wish to support drag and drop). Always remember to check that the versions of jQuery and jQuery UI you are using are compatible.
<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>
You must set position:absolute on elements that you intend to be draggable. The reasoning for this is that all libraries implement dragging by manipulating the left and top properties of an element's style attribute.
.drag-me {
position: absolute;
width: 230px;
...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.