使用可调整大小的Droppable中的JQueryUI Draggable不起作用.想法是能够拖动拖放到div的元素,并为已删除的元素调整大小.
工作代码：http://jsfiddle.net/lukaszjg/GvDLh/
重现问题的说明：
>将“拖我”拖到“放下的地方”
>尝试调整大小
>尝试将拖动的元素拖到“放置的位置”内
>尝试再次调整大小拖动元素 – 未按预期工作
请在下面找到#dragme和#droppable引用相应div的代码.
任何ide如何解决它？
$("#dragme").draggable({
helper: 'clone',cursor: 'move',tolerance: 'fit'
});
var x = null;
$("#droppable").droppable({
drop: function(e,ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',containment: '#droppable',tolerance: 'fit'
});
x.resizable();
x.appendTo('#droppable');
ui.helper.remove();
}
});
最佳答案
将可调整大小的窗口小部件绑定到元素时,它将添加几个< div class =“ui-resizable-handle”>元素.然后,在你的drop回调中,你有这个：
原文链接：https://www.f2er.com/jquery/427996.htmlx = ui.helper.clone();
这将克隆.ui-resizable-handle元素以及要克隆的元素.然后几行,你有：
x.resizable();
显然,调用因.ui-resizeable-handle元素的存在而变得混乱;它最终将添加一组额外的.ui-resizeable-handle元素,但它们不会因为z-index问题而起作用：原始文件将(可能)高于它们并阻止所有事件进入.具有事件处理程序的ui-resiable-handle元素.如果您在使克隆重新调整大小之前手动删除有问题的< div>：
x.find('.ui-resizable-handle').remove();
x.resizable();
然后它工作：
$("#droppable").droppable({
drop: function(e,ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',tolerance: 'fit'
});
x.find('.ui-resizable-handle').remove();
x.resizable();
x.appendTo('#droppable');
ui.helper.remove();
}
});
更新小提琴：http://jsfiddle.net/ambiguous/xZECa/
只是调用x.resizable(‘destroy’)来清理它不起作用,因为x不可调整大小,所以没有任何反应.
应该有更好的方法来完成这项工作,但我不知道它到底是什么.
