Question

使用可调整大小的Droppable中的JQueryUI Draggable不起作用。想法是能够拖放被拖放到div的元素，并为已删除的元素调整大小。

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

重现问题的说明：

将“拖我”拖到“放下的地方”
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问题：原始文件将（可能）高于它们并阻止所有事件进入{{ 1}}附加了事件处理程序的元素。如果您在使克隆重新调整大小之前手动删除有问题的.ui-resiable-handle：

<div>

然后它起作用：

x.find('.ui-resizable-handle').remove();
x.resizable();

更新了小提琴：http://jsfiddle.net/ambiguous/xZECa/

只是调用$("#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(); } });来清理它是行不通的，因为x.resizable('destroy')无法调整大小，所以没有任何反应。

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

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

一旦你附上＆＃34; .resizable（）＆＃34; with element首先销毁事件然后附加。它会工作。 // $（ele）是一个对象。



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

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

3 个答案: