在拖動時調整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可拖動元素的包含父項的大小

回答

相關問題