js拖拽功能实现,初始化jsplumb实例对象
时间: 2023-07-13 07:09:51 浏览: 54
要实现js拖拽功能,可以使用html5的拖放API或者jQuery UI等库来实现。下面是一个使用jQuery UI实现拖拽功能的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>拖拽功能实现</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.4.7/js/jsplumb.min.js"></script>
<style type="text/css">
#container{
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
.block{
position: absolute;
width: 50px;
height: 50px;
background-color: #f00;
cursor: move;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
}
</style>
<script type="text/javascript">
$(function(){
//初始化jsPlumb实例对象
jsPlumb.ready(function(){
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", {radius:2}],
Connector:"StateMachine",
HoverPaintStyle: {stroke:"#1e8151", strokeWidth:2 },
ConnectionOverlays: [
[ "Arrow", {
location:1,
id:"arrow",
length:14,
foldback:0.8
} ]
]
});
});
//初始化拖拽功能
$(".block").draggable({
containment: "#container",
stop: function(event, ui) {
//更新jsplumb连接线
jsPlumb.repaint(ui.helper);
}
});
//初始化连接功能
jsPlumb.connect({
source: "block1",
target: "block2"
});
});
</script>
</head>
<body>
<div id="container">
<div id="block1" class="block">1</div>
<div id="block2" class="block" style="top: 100px; left: 100px;">2</div>
</div>
</body>
</html>
```
在上面的代码中,首先通过jQuery UI的draggable方法初始化了拖拽功能,然后通过jsPlumb的connect方法初始化了连接功能。同时在jsPlumb.ready方法中初始化了jsPlumb实例对象,以便后续使用。