Question

我正在创建一个活动生成器创作工具。用户使用右键菜单可以选择向页面添加许多元素，对于其中一些元素，用文本填充它们。

使用Jquery UI，所有元素都可以拖动，一些元素可以调整大小。我希望用户能够制作一个元素的精确副本，但是当我使用克隆功能时，我会得到奇怪的结果。我可以将原件拖离克隆，但是当我尝试拖动克隆时，它只是拖动原件并保持原位。

继承我的代码

    function addobject (element_type){
       $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
       $( "#" + counter ).multidraggable({ containment: "#activitystage",  grid: [10, 10],drag: function(event,ui){ showpositions(); }});   
       $('#' + counter).contextMenu({menu: 'functionsMenu'  }, function(action, el, pos) {run(action, el);  });
       $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>");
    }

    function run (action, el){
       switch (action){
            case "clone":
              $(el).clone(true).attr('id', 'some new id').appendTo('#activitystage');
              break;
}

Answer 1

我能想到的最简单的问题解决方法是简单地使用clone（false）并重新绑定拖放事件。

试试此代码

var attr = { containment: "#activitystage",  grid: [10, 10],drag: function(event,ui){ showpositions(); }};

function addobject (element_type){
    $('#activitystage').append($("<div class=\"draggable " + element_type + "\" id=\"" + counter + "\"></div>")); 
    $( "#" + counter ).multidraggable(attr);   
    $('#' + counter).contextMenu({menu: 'functionsMenu'  }, function(action, el, pos) {run(action, el);  });
    $('#' + counter).append("<textarea class=\"" + element_type + "\"></textarea>");
}

    function run (action, el){
       switch (action){
            case "clone":
              $(el).clone(false).attr('id', 'some new id').appendTo('#activitystage').multidraggable(attr);
              break;
}

克隆一个Jquery draggable也拖了它的原始

1 个答案: