在拖动时调整JQuery可拖动元素的包含父项的大小

我在另一个div'box'父容器中有div'slide'元素，并且已将JQuery Draggable应用于子项。在拖动项目时，我正在调整父容器的大小，有时会缩小，有时会扩大它。在拖动时调整JQuery可拖动元素的包含父项的大小

问题是，JQuery没有响应这个调整大小，仍然包含在父级的原始尺寸内的拖动元素，而不是在其当前的大小，直到mouseup - 下一个拖动会话将使用新的尺寸直到它再次改变）。

要尝试和解决这个问题，我希望能触发鼠标松开事件后，通过鼠标按下事件，让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";

任何人都知道^ h我可以a）让Draggable实时响应父维度的变化或b）触发dragstop然后无缝地dragend？

谢谢。

来源

2012-05-04 Fijjit

顺便说一句，我知道我可以使用返回false，结束拖动，但我需要这对用户来说是不可见的，所以他们可以继续移动鼠标来拖动元素，而不必鼠标移动并再次返回。 – Fijjit

@Fijjit，如果我理解正确，你想要的是一个自定义的“包含”功能，它实现你的resizeContainer算法，然后将限制应用到拖动元素。

在下面的代码，

标准draggable containment选项被忽略
resizeContainer附着作为draggable drag事件处理程序
resizeContainer是双重目的; （一）它执行的大小调整算法和（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 
    }); 
});

见fiddle demo

来源

2012-05-05 01:28:36

太棒了 - 非常感谢。我知道传入的ui值，但没有想到.position.left值实际上会影响位置（我认为它是只读的）。我正在做的是试图设置对象的css（style.left），但我猜JQuery最终会覆盖它。 – Fijjit

不用担心。硬件知道使用'.outerWidth（）'和'.width（）'作为容器。当元素具有填充和/或边界时，这很重要，否则计算的包含边界在最右边的行程极限处给出令人讨厌的视觉重叠错误。 –

在拖动时调整JQuery可拖动元素的包含父项的大小

回答

相关问题