ドラッグ中のJQueryドラッグ可能な要素の閉じ込め親のサイズ変更

Question

別のdiv 'ボックス'親コンテナ内にdiv 'slide'要素があり、JQuery Draggableをその子に適用しました。アイテムがドラッグされている間、親コンテナのサイズを変更しています。時には縮小し、時には拡大しています。

問題は、JQueryがこのサイズ変更に応答せず、mouseupが次のドラッグセッションで新しいディメンションを使用するまで、現在のサイズではなく親の元のサイズ内にドラッグされた要素が含まれていることですそれが再び変わるまで）。これを試してみて、解決するために

、私はjQueryの新しいコンテナのサイズを使用するように、マウスダウンイベントに続いてmouseUpイベントをトリガするために期待していた。

$('.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'); 
         } 
        } 

しかし、これは例外がスローされます...

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

誰もが知っているH：jQueryのコードのこの行の

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

...私はa）親ディメンションの変更にリアルタイムで応答するDraggableを取得するか、またはb）ドラッグストップをトリガーしてからシームレスにドラッグするかのいずれかが可能です。

ありがとうございました。

Answer 1

@Fijjit私が正しく理解するならば、ドラッグされた要素に境界線を適用する前に、resizeContainerアルゴリズムを実装するカスタムの "包含"関数が必要です。標準draggable containmentオプションが

resizeContainer

を省略し

• 以下のコードで

  は、draggable dragイベントハンドラ

• resizeContainerように取り付けられている二重の目的です。 （a）は、それはあなたのサイズ変更アルゴリズムを実行し、（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