未在jsPlumb中拖動的元素

某些功能無法正常使用jsPlumb進行拖放。我讓左邊的div可以拖動，但是當你拖動它們時，只有線條移動，而不是div。這是我的代碼：未在jsPlumb中拖動的元素

<html> 
<head> 
<title>Plumb Test</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.16-all-min.js "></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    jsPlumb.draggable($(".left")); 
    jsPlumb.connect({source:"div1", target:"div2", 
     paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'}, 
     endpointStyle:{fillStyle:'rgb(243,229,0)'} 
    }); 
    jsPlumb.connect({ 
     source:'div3', 
     target:'div4', 
     paintStyle:{ lineWidth:10, strokeStyle:'rgba(0, 0, 200, 0.5)' }, 
     anchors:["RightMiddle", "LeftMiddle"], 
     endpoint:[ "Rectangle", { width:10, height:8 } ] 
    });  
    jsPlumb.connect({ 
     source:'div2', 
     target:'div3', 
     paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11)'}, 
     anchors:["BottomCenter", "TopCenter"], 
     endpoint:"Rectangle" 
    });  
    $("#div1").css("background-color","blue"); 
}); 
</script> 
<style> 
#div1, #div4{background-color:red;width:150px;height:150px;} 
#div2, #div3{background-color:green;width:150px;height:150px;} 
.left{float:left;} 
.right{float:right;} 
</style> 
</head> 

<body> 
    <div id="div1" class="left">This is a test</div> 
    <div id="div2" class="right">This is a div</div> 
    <div id="div3" class="left">This is a test</div> 
    <div id="div4" class="right">This is a div</div> 
</body> 
<html>

來源

2013-04-18 user1015214

要啓用拖動您的Div的必須絕對定位。

<style> 
#div1, #div4{background-color:red;width:150px;height:150px;position:absolute; } 
#div2, #div3{background-color:green;width:150px;height:150px; position:absolute;} 
</style>

更多信息check jsplumbs doc。

Your working fiddle

來源

2013-04-19 07:26:08

未在jsPlumb中拖動的元素

回答

相關問題