使用可拖拽、可放置和可调整大小的 Jquery 不按预期工作。

Question

JQueryUI可拖拽的元素无法在具有可调整大小功能的可放置区域内工作。其想法是能够拖动元素并将其放置到带有调整大小的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();
}
});

- user950993

---

这个 jsfiddle 对我来说运行良好。唯一的问题是，当您尝试选择右下角以便在两个维度上调整大小时，我的浏览器（Chrome）非常挑剔。 - m90

@m90：观察DOM，看看当您拖放并再次拖动时是否会出现双重设置的.ui-resizable-handle元素。z-index冲突的处理方式可能因浏览器而异。 - mu is too short

Answer 1

我曾经遇到一些问题在尝试使用你的解决方案，但你指明了方向，所以如果这可以帮助其他人，我将描述我的问题和解决方案。

我的情况是：一个规划，其中可投放的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*/
});

}
});

希望这可以帮到您。

注意：我不太确定我的英语水平，如果有错误或拼写错误，请参考“回归基础知识”部分并原谅我;-)。

- Julien

Answer 2

当您将可调整大小的小部件绑定到元素时，它会添加几个<div class="ui-resizable-handle">元素。然后，在您的drop回调函数中，您可以使用以下代码：

x = ui.helper.clone();

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

x.resizable();

显然，这个调用会因为存在 .ui-resizeable-handle 元素而变得混乱；它最终会添加一组额外的 .ui-resizeable-handle 元素，但由于 z-index 的问题，它们可能无法正常工作：原来的元素将（可能）在它们上面，并阻止所有事件传递到附加有事件处理程序的 .ui-resizable-handle 元素。如果您在使克隆可调整大小之前手动删除有问题的 <div> 元素：

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不是可缩放的，所以没有任何效果。

应该有更好的方法使其生效，但我还不知道是什么。

- mu is too short

Answer 3

当您将".resizable()"与元素一起使用时，首先销毁事件，然后再附加。 这样就可以工作了。 //$(ele)是一个对象。

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

- Rahul Sharma