具有droppable draggable和resizable的Jquery无法按预期工作

Question

使用可调整大小的Droppable中的JQueryUI Draggable不起作用.想法是能够拖动拖放到div的元素,并为已删除的元素调整大小.

工作代码:http://jsfiddle.net/lukaszjg/GvDLh/

重现问题的说明:

1. 拖动"拖我"到"放下的地方"
   1. 尝试调整大小
   2. 尝试将拖动的元素拖到"放置位置"内
   3. 尝试再次调整大小拖动元素 - 无法按预期工作

请在下面找到#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();
}
});

Answer 1

当您将可调整大小的小部件绑定到元素时，它将添加多个<div class="ui-resizable-handle">元素。然后，在你的drop回调中，你有这个：

x = ui.helper.clone();

这将克隆.ui-resizable-handle元素以及您想要克隆的元素。然后几行之后，你就得到了：

x.resizable();

显然，该调用因元素的存在而变得混乱.ui-resizeable-handle；它最终会添加一组额外的.ui-resizeable-handle元素，但它们可能无法工作，可能是因为 z-index 问题：原始元素（可能）位于它们上方，并阻止所有事件深入到.ui-resiable-handle附加了事件处理程序的元素他们。如果您<div>在调整克隆大小之前手动删除有问题的 s：

x.find('.ui-resizable-handle').remove();
x.resizable();

然后它就起作用了：

$("#droppable").droppable({
    drop: function(e, ui) {
        x = ui.helper.clone();
        x.draggable({
            helper: 'original',
            containment: '#droppable',
            tolerance: 'fit'
        });
        x.find('.ui-resizable-handle').remove();
        x.resizable();
        x.appendTo('#droppable');
        ui.helper.remove();
    }
});

更新的小提琴：http ://jsfiddle.net/ambiguously/xZECa/

仅仅调用x.resizable('destroy')来清理它是行不通的，因为它的大小x无法调整，所以什么也没有发生。

应该有更好的方法来完成这项工作，但我还不知道它是什么。