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

使用可调整大小的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回调中,你有这个：

x = 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不可调整大小,所以没有任何反应.

应该有更好的方法来完成这项工作,但我不知道它到底是什么.