我正在创建一个事件生成器创作工具。用户使用右键单击菜单可以选择向页面添加多个元素,并对其中一些元素填充文本。
使用 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;
}
最佳答案
我能想到的解决您的问题的最简单方法是简单地使用clone(false)并重新绑定(bind)拖放事件。
试试这个代码
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 - 克隆 Jquery 可拖动对象也会拖动其原始对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8154532/