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

Posted 2023-05-08

【中文标题】具有可拖放可拖动和可调整大小的 Jquery 无法按预期工作

【英文标题】：Jquery with droppable draggable and resizable is not working as expected

【发布时间】：2011-11-19 13:55:54

【问题描述】：

可调整大小的 Droppable 内的 JQueryUI Draggable 不起作用。想法是能够拖动被拖放到 div 的元素，并调整拖放元素的大小。

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

问题重现说明：

将“拖我”拖到“要放置的地方”
尝试调整大小 尝试将拖动的元素拖入“放置位置” 再次尝试调整拖动元素的大小 - 未按预期工作

请在下面的代码中找到#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();

);

【问题讨论】：

顺便说一句，jsfiddle 对我来说很好用。唯一的问题是，当您尝试选择右下角时，我的浏览器 (Chrome) 非常挑剔，因此您可以在 2 维中调整大小。

@m90：观察 DOM，看看当你再次拖放时，你是否会得到一组 .ui-resizable-handle 元素。 z-index 冲突的结果可能取决于浏览器。

【参考方案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 无法调整大小，所以没有任何反应。

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

【参考方案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*/
);


);

希望对你有帮助

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

【参考方案3】：

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

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