JsPlumb - 在可拖动元素上使用端点时不刷新位置

问题描述：

我开始使用jsPlumb和JQuery，我想连接可拖动元素，但如果在连接之前添加可拖动行为，则连接不刷新位置。JsPlumb - 在可拖动元素上使用端点时不刷新位置

我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
     <title></title> 

     <style type="text/css"> 
      .window { 
       background-color: white; 
       border: 3px solid #346789; 
       color: black; 
       font-family: helvetica; 
       font-size: 0.8em; 
       height: 12em; 
       opacity: 0.8; 
       padding: 0.5em; 
       position: absolute; 
       width: 14em; 
       z-index: 20; 
      } 
     </style> 

     <script type="text/javascript" src="jquery.min.js"></script> 
     <script type="text/javascript" src="jquery-ui.min.js"></script> 
     <script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script> 
    </head> 
    <body> 
    <div> 
     <div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div> 
     <div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div> 
    </div> 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      $(".window").draggable(); 

      var a = $("#a"); 
      var b = $("#b"); 
      jsPlumb.connect({ 
       source:a, 
       target:b, 
       connector:["Bezier",68], 
       endpoints:[ 
        ["Dot",{radius:12}], 
        ["Rectangle",{width:20,height:30}] 
       ] 
      }); 
     }); 
    </script> 
    </body> 
    </html>

答

我写jsPlumb。

它不刷新的原因是它无法知道被拖动的东西。而不是调用$（“。window”）。draggable（），你可能需要让jsPlumb在你建立连接时或者通过这种方法为你做这件事：

jsPlumb.draggable（$（“.window” ））;

第一个选项不会初始化拖动任何没有连接的窗口。第二个会。

然后是jsPlumb支持动态创建的元件在它的连接？ – Roylee

我有一个相同的问题，我需要这个工作在我的动态创建的元素，我打电话jsPlumb.draggable（$（“.classname））;但它不工作.... – Bhavin

答

有办法很少这样做 - 指jsPlumb documentation

，但一般可以使用：元素

ID的元素的
阵列
或选择器（用于前面提到的示例类选择器：jsPlumb.draggable($(".window"));

这里是一个工作示例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>JS 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="/include/jquery.jsPlumb-1.3.16-all-min.js"></script> 

    <style> 
     .window { 
      background-color: #EEEEEF; 
      border: 1px solid #346789; 
      border-radius: 0.5em; 
      box-shadow: 2px 2px 19px #AAAAAA; 
      color: black; 
      height: 5em; 
      position: absolute; 
      width: 5em; 
      cursor: pointer; 
     } 
    </style> 

    <script> 

     jsPlumb.ready(function() { 

      // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course) 

      //jsPlumb.draggable("container0"); 
      //jsPlumb.draggable(["container0", "container1"]); 
      jsPlumb.draggable($(".window")); 

      //perform operation only after DOM is loaded 
      var e0 = jsPlumb.addEndpoint("container0"), 
       e1 = jsPlumb.addEndpoint("container1"); 



      jsPlumb.connect({ source: e0, target: e1 }); 


     }); 


    </script> 

</head> 
<body > 
    <div class="window" style="left: 20px" id="container0"> 
    </div> 

    <div class="window" style="left: 200px" id="container1"> 
    </div> 
</body> 
</html>

JsPlumb - 在可拖动元素上使用端点时不刷新位置

相关推荐