具有可放置、可拖动和可调整大小的 Jquery 无法按预期工作

Question

JQueryUI Draggable inside Droppable 且可调整大小不起作用。想法是能够将拖放的元素拖放到 div 中，并调整放置元素的大小。

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

重现问题的说明:

1. 将“拖我”拖到“放置位置”
   1. 尝试调整大小
   2. 尝试将拖动的元素拖动到“放置位置”内
   3. 再次尝试调整拖动元素的大小 - 未按预期工作

请查找下面的代码，其中 #dragme 和 #droppable 引用相应的 div。有知道如何修复它吗？

$("#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

当你将一个可调整大小的小部件绑定(bind)到一个元素时，它会添加几个 <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();
    }
});

更新的 fiddle :http://jsfiddle.net/ambiguous/xZECa/

只需调用 x.resizable('destroy')清理它不起作用，因为 x无法调整大小，因此什么也不会发生。

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