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

Question

可调整大小的 Droppable 内的 JQueryUI Draggable 不起作用。想法是能够拖动被拖放到 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

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

仅仅调用x.resizable('destroy') 来清理它是行不通的，因为x 无法调整大小，所以没有任何反应。

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

Answer 2

我在试验你的解决方案时遇到了一些麻烦，但你让我上路了，所以如果这对其他人有帮助，我会描述我的问题和解决方案。

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

问题：完全一样，只是我的“任务”已经是 droppable 的子项（来自数据库）并且有很多 .data() 东西，所以克隆是一团糟。 droppable drop 事件引发错误“无法转换 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

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

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