jQuery的可拖动拖动和可调整大小不能按预期工作

JQueryUI拖动可调整大小不能调整大小不起作用。想法是能够拖动拖放到div的元素，并调整拖放元素的大小。jQuery的可拖动拖动和可调整大小不能按预期工作

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

指令来重现问题：

将 “拉我” 到 “地方砸”
1. 尝试调整
2. 尝试里面拖拖动的元素“放置的地方”
3. 尝试再次调整大小拖动元素 - 未按预期工作

请在下面的代码中找到#dragme和#droppable指的是相应的div。任何ide如何解决它？

$("#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(); 
} 
});

来源

2011-09-18 user950993

jsfiddle对我来说工作的很好。唯一的问题是，当您尝试选择右下角时，我的浏览器（Chrome）非常挑剔，因此您可以在二维中调整大小。 – m90

@ m90：观看DOM，当你拖动，拖放和再次拖动时，看看是否最终会有一组“.ui-resizable-handle”元素。 z-index冲突如何发挥可能与浏览器有关。 –

当您可调整大小的小部件绑定到一个元素，它会增加一些<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>奇妆克隆可调整大小：

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-18 08:14:03

我有一些麻烦试验你的解决方案，但你让我走，所以我会描述我的问题和解决方案，如果这有助于别人。

我的案例：一个规划与可droppable divs代表每个员工，可拖动，可调整大小divs代表任务。

问题：完全一样，只有我的“任务”已经是droppable的子项（来自数据库），并且有很多.data（）的东西，所以克隆是一团糟。 Droppable Drop事件抛出一个错误“无法转换JavaScript参数”，并将我的应用程序阻止任何进一步的拖动。

看到您的解决方案，并不能重现它在我的情况后，我又回到了基础：

“如果你有一个樵夫IQ使用斧头”。

所以这里的东西：

$("#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-28 11:19:16 Julien

一旦您将“.resizable（）”添加到元素中，首先销毁该事件，然后再附加。它会工作。 // $（ele）是一个对象。

 


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

来源

2014-07-22 07:55:07

jQuery的可拖动拖动和可调整大小不能按预期工作

回答

相关问题