将端点绑定到 jsPlumb 中的克隆

Question

我有一个拖放应用程序，我正在尝试使用 jsPlumb 添加连接点。我有组件工具栏，用户可以将组件拖放到画布上。

一旦他们放下一个项目，我就创建一个克隆并使用 jQuery UI 为该克隆分配一个唯一 ID。在克隆的双击上，我试图在顶部添加一个端点，并且我已经成功地添加了端点。但是当我拖动组件时，终点不会随之拖动。

以下是我的代码。

jsPlumb.ready(function() {

//providing dragging for .drag class components
$(".drag").draggable({
  helper: 'clone',
  cursor: 'move',
  tolerance: 'fit',
  stop: function (ev, ui) {

      var pos = $(ui.helper).offset();
      objName = "#clone" + count;

      $(objName).removeClass("drag");

      $(objName).draggable({
            cancel: ".arrows"
      });


      //When an existing object is dragged
      //objName is the clone and providing dragging option it
      $(objName).draggable({
          containment: '#droppable',
          stop: function (ev, ui) {   

          }
      });
  },
  revert: true 
});

$("#droppable").droppable({

  accept: '.drag',
  activeClass: "drop-area",
  drop: function (e, ui) {


      if ($(ui.draggable)[0].id != "") {

         count++;


         x = ui.helper.clone();
         $(this).append(x.attr("id",'clone'+count));

         ui.helper.remove();


    var offsetXPos = ui.offset.left;
        var offsetYPos = ui.offset.top;



        var clone = ui.draggable;
        var width = clone.width();
        var height = clone.height();

        var obj = {};

            obj["cloneID"] =  'clone'+count;
            obj["width"] = 85;
            obj["height"] = 91;
            obj["top"] = offsetYPos;
            obj["left"] = offsetXPos;

        var str = eval(obj);
        jsonElements.push(str);


          $("#clone"+count).dblclick(function(event) {


              var sourceUUID = "xxx";
             //addindg the end point to the clone
             instance.addEndpoint('clone'+count, sourceEndpoint, {
                    anchor : "TopCenter",
                    uuid : sourceUUID
                });




             instance.draggable(jsPlumb.getSelector(".droppable .window"),
        {
            grid : [ 20, 20 ]
        }); 


          }); 


          x.appendTo('#droppable');

      }
  }
});

});

Answer 1

我找到了解决方案。发生这种情况是因为克隆对象上仍然存在“ui-draggable”css 类。在我使用 $("#clone"+count).removeClass("ui-draggable") 动态删除它之后，它工作正常。希望这会对某人有所帮助。