克隆 Jquery 可拖动对象也会拖动其原始对象

发布于 2024-12-15 15:31:34 字数 941 浏览 3 评论 0原文

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

使用 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;
}

原文

I am creating an activity generator authoring tool. The user, using a right click menu can choose to add a number of elements to the page, and for some of them, fill them with text.

Using Jquery UI, All elements are draggable and some are resizeable. I want the user to be able to make an exact copy of an element but when I use the clone function i'm getting strange results. I can drag the original away from the clone but when I try to drag the clone, it just drags the original around and stays in its place.

Heres my code

    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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

跨年 2024-12-22 15:31:34

我能想到的解决您问题的最简单方法是简单地使用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;
}

The easiest fix for your problem i can think of is to simply use clone(false) and rebind the drag and drop event.

Try this code

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;
}

回复收藏 0 原文

~没有更多了~