克隆一个 Jquery 可拖动对象也会拖动它的原始对象
Posted
技术标签:
【中文标题】克隆一个 Jquery 可拖动对象也会拖动它的原始对象【英文标题】:Cloning a Jquery draggable also drags its original 【发布时间】:2011-12-30 13:42:01 【问题描述】:我正在创建一个活动生成器创作工具。用户使用右键菜单可以选择向页面添加许多元素,并且对于其中一些元素,用文本填充它们。
使用 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;
【问题讨论】:
你有没有尝试在克隆的 div 上重新应用 multidraggable 功能? 你用的是什么版本的jQuery? 另外,如果counter
是一个数字,那么您的 html 似乎无效。 ID 不能以数字开头。
我使用的是 jquery 1.5,jquery ui 1.8。不知道你不能用数字开始一个ID,谢谢。尝试重新应用 multidraggable 但没有帮助
如果你克隆一个对象,通常会做一个浅拷贝。任何引用其他变量的属性都将保持引用。您必须将可拖动对象设置为新对象
【参考方案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 可拖动对象也会拖动它的原始对象的主要内容,如果未能解决你的问题,请参考以下文章