在拖动时调整JQuery Draggable元素的包含父级的大小

我在另一个div’box’父容器中有一个div’slide’元素，并将JQuery Draggable应用于子节点。 当项目被拖动时，我正在调整父容器的大小，有时缩小，有时会扩大它。

问题是JQuery没有响应这个resize并且仍然包含父元素的原始维度中的拖动元素，而不是在其当前大小内，直到mouseup – 下一个拖动会话将使用新维度（直到它再次更改） ）。

为了尝试解决这个问题，我希望触发mouseup事件，然后触发mousedown事件，以便JQuery使用新的容器大小：

$('.slide').draggable({ axis: "x", containment: 'parent', drag: function (e, ui) { resizeContainer(); if (outsideContainer()){ // Try to stop and restart dragging $(this).trigger('mouseup'); $(this).trigger('mousedown'); } } 

但是，这引发了一个例外……

 Unable to get value of the property '0': object is null or undefined 

…在这行JQuery代码上：

 this.helper[0].style.left=this.position.left+"px"; 

任何人都知道我可以如何a）让Draggable实时响应父级维度的变化或b）触发一个dragstop然后无缝地拖拉？

谢谢。

Answer 1

@Fijjit，如果我理解正确，你想要的是一个自定义的“包含”函数，它在将边界应用于拖动元素之前实现你的resizeContainer算法。

在下面的代码中，

• 标准的draggable containment选项被省略
• resizeContainer作为draggable drag事件处理程序附加
• resizeContainer是双重目的; （a）它执行你的resize算法和（b）应用自定义包含算法

JavaScript的：

 $(function(){ var $container = $("#myContainer"); function resizeContainer(e, ui) { //implement container resize algorithm here var w1 = ui.helper.outerWidth(), w2 = $container.width(); ui.position.left = Math.max(Math.min(ui.position.left, w2 - w1), 0); } $("#draggable").draggable({ axis: "x", drag: resizeContainer }); }); 

请参阅小提琴演示