具有可放置、可拖动和可调整大小的 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

当您将可调整大小的小部件绑定到元素时，它将添加多个

元素。然后，在您的 drop 回调中，您将看到：

x = ui.helper.clone();

这将克隆 .ui-ressized-handle 元素以及您想要克隆的元素。然后几行之后，您会看到：

x.resizable();

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

：

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.ressized('destroy') 来清理它是行不通的，因为x 无法调整大小，因此什么也不会发生。

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

Answer 2

我在尝试您的解决方案时遇到了一些麻烦，但您让我陷入了困境，所以如果这对其他人有帮助，我将描述我的问题和解决方案。

我的案例：一个计划，其中可放置的 div 代表每个员工，可拖动、可调整大小的 div 代表任务。

问题：完全相同，只是我的“任务”已经是可删除的子项（来自数据库）并且有很多 .data() 内容，因此克隆很混乱。
可放置的放置事件会抛出错误“无法转换 javascript 参数”并破坏我的应用程序，阻止任何进一步的拖动。

在看到您的解决方案并未能在我的案例中重现它之后，我回到了基础知识：

“如果您有伐木工智商，请使用斧头”。

所以这就是内容：

$("#dragme").draggable({
helper: 'original', //Needed in my case
cursor: 'move',
tolerance: 'fit',

start: function(event,ui){
$(this).resizable( "destroy" );/* The resizable generates troubles to the droppable?
Well let's remove the problem...
*/
} 

}).resizable({
/*All my functions to apply to the task when resized*/

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({
drop: function(e, ui) {
/*All my drop functions to manage the task*/

//creating the resizable again PROBLEM SOLVED
$(ui.draggable).resizable({
/*All my functions to apply to the task when resized*/
});

}
});

希望这可以帮助

注意：不是很我确信我的英语水平，所以如果出现错误或拼写错误，请参阅“回到基础知识”部分并原谅我;-)。

Answer 3

一旦你将“.ressized()”附加到元素上，首先销毁事件然后附加。
它会起作用的。
//$(ele) 是一个对象。

    $(ele).resizable().resizable("destroy");
        $(ele).draggable();
        $(ele).resizable({
          animate: 'true',
          ghost: 'true',
          handles: 'ne, nw, se, sw',
    });