5

可调整大小的 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();
}
});
4

3 回答 3

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*/
});

}
});

希望这可以帮助

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

于 2012-04-28T11:19:16.360 回答
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-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它不能调整大小，所以什么也没有发生。

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

于 2011-09-18T08:14:03.683 回答
0

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



    $(ele).resizable().resizable("destroy");
        $(ele).draggable();
        $(ele).resizable({
          animate: 'true',
          ghost: 'true',
          handles: 'ne, nw, se, sw',
    });
于 2014-07-22T07:55:07.847 回答