将端点绑定到 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"） 动态删除它后，它工作正常。希望这会对某人有所帮助。