jsPlumb-没有复制拖动克隆

我试图从工具箱拖到画布上的对象（一个简单的图像）。但是，一旦我移动/拖动放置在画布上的对象，它似乎会创建另一个自身的克隆。但我需要的只是简单地将对象拖放到画布上多次，并且可以在画布内移动对象而不必在画布中拖动对象时创建对象的复制。这里是我的代码：jsPlumb-没有复制拖动克隆

<!doctype html> 
 
<html> 
 
<head> 
 

 
    <script src="../lib/jquery.min.js"></script> 
 
    <script src="../lib/jquery-ui.min.js"></script> 
 
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script> 
 
    <!--script src="../dist/js/jsPlumb-2.1.1-min.js"></script--> 
 

 
    <style> 
 
     .ctoolbox{ 
 
      position: absolute; 
 
      width: 72px; 
 
      height: 80px; 
 
      background-color: #0d78bc; 
 
      background-image: url("../dist/img/bigdot.png"); 
 
      border: solid 3px red; 
 
     } 
 

 
     #dropArea{ 
 
      cursor: pointer; 
 
      border: solid 1px gray; 
 
      width: 800px; 
 
      margin-left: 80px; 
 
      height: 400px; 
 
      position: relative; 
 
      overflow-x: scroll; 
 
      overflow-y: scroll; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <div class="ctoolbox" id="cId"> 
 
    </div> 
 
    <div id="dropArea"></div> 
 

 
    <script> 
 

 
     //Drag and drop works for multiple objects but manipulating those objects within the canvas doesn't. 
 
     //Objects in the canvas are stagnant. 
 
     jsPlumb.ready(function(e) 
 
     { 
 
      jsPlumb.setContainer($('#dropArea')); 
 
      $(".ctoolbox").draggable 
 
      ({ 
 
       helper : 'clone', 
 
       cursor : 'pointer', 
 
       tolerance : 'fit', 
 
       revert : true 
 

 
      }); 
 

 
      $("#dropArea").droppable 
 
      ({ 
 
       accept : '.ctoolbox', 
 
       containment : 'dropArea', 
 

 
       drop : function (e, ui) { 
 
        droppedElement = ui.helper.clone(); 
 
        $(droppedElement).draggable({containment: "dropArea"}); //Replicates everytime an object on the canvas is dragged. 
 
        droppedElement.appendTo('#dropArea'); 
 
        droppedElement.click(divClicked); 
 

 
       } 
 

 
      }); 
 

 
      function divClicked(clickedElement) 
 
      { 
 
       jsPlumb.draggable(clickedElement, { 
 
        containment : 'parent', 
 
        stop : function (event) 
 
        { 
 
         alert("divClicked Called!"); 
 
         stateDragged=true; 
 
         clickedElement.css('background-color ','blue'); 
 
        } 
 

 
       }); 
 
      } 
 
     }); 
 

 
    </script> 
 
</body> 
 
</html>

来源

2016-05-16 Nayantara Jeyaraj

我已经解决了它，这里的最终代码。由于jsPlumb不支持jQuery，我不得不移除助手。还可以向提供相同样式的下拉元素添加类，但不会继承与ctoolbox元素相同的功能。

<!doctype html> 
 
<html> 
 
<head> 
 

 
    <script src="../lib/jquery.min.js"></script> 
 
    <script src="../lib/jquery-ui.min.js"></script> 
 
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script> 
 

 
    <style> 
 
     .ctoolbox{ 
 
      position: absolute; 
 
      width: 72px; 
 
      height: 80px; 
 
      background-image: url("../dist/img/bigdot.png"); 
 
      border: solid 3px red; 
 
     } 
 

 
     #dropArea{ 
 
      cursor: pointer; 
 
      border: solid 1px gray; 
 
      width: 800px; 
 
      margin-left: 80px; 
 
      height: 400px; 
 
      position: relative; 
 
      overflow-x: scroll; 
 
      overflow-y: scroll; 
 
     } 
 

 
     .ch{ 
 
      position:absolute; 
 
      cursor:pointer; 
 
      width: 72px; 
 
      height: 80px; 
 

 
      background-image: url("../dist/img/bigdot.png"); 
 

 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
<div class="ctoolbox" id="cId"> 
 
</div> 
 
<div id="dropArea"></div> 
 

 

 

 
<script> 
 
    jsPlumb.ready(function(e) 
 
    { 
 
     jsPlumb.setContainer($('#dropArea')); 
 
     $(".ctoolbox").draggable  ({ 
 
      helper : 'clone', 
 
      cursor : 'pointer', 
 
      tolerance : 'fit', 
 
      revert : true 
 
     }); 
 

 
     $("#dropArea").droppable  ({ 
 
      accept : '.ctoolbox', 
 
      containment : 'dropArea', 
 

 
      drop : function (e, ui) { 
 
       droppedElement = ui.helper.clone(); 
 
       ui.helper.remove(); 
 
       $(droppedElement).removeAttr("class"); 
 
       jsPlumb.repaint(ui.helper); 
 
       $(droppedElement).addClass("ch"); 
 
       $(droppedElement).draggable({containment: 
 

 
       "dropArea"}); 
 
       droppedElement.appendTo('#dropArea'); 
 

 
      } 
 

 
     }); 
 

 
    }); 
 

 
</script> 
 
</body> 
 
</html>

来源

2016-05-17 08:53:51

jsPlumb-没有复制拖动克隆

回答

相关问题