JQuery UI draggable：片側に閉じ込めを閉じます

Question

JQuery UIを使用してサイズ変更/ドラッグ可能な要素を実装しています。ここでは、これらの要素の封じ込めを定義して、正確に3つの（！）面のサイズ変更/ドラッグを制限したいと考えています。例えば。このJSFiddle exampleをご覧ください。含まれている要素は、親の領域内でのみサイズ変更/ドラッグすることができます。

私が達成したいのは、要素が下限しきい値を超え、親の下限を超えて移動できることです。それにもかかわらず、リサイズ/ドラッグは、親の境界に従って規定されているように、上、右、および左のサイドで制限されるべきである。

のでthis modificationは私が思い付いたものです：あなたは子供が親の下の境界線に近づきすぎた場合、親の領域が展開されていることに気づく下の境界で遊んでいる場合

// resizable/draggable option 
resize/drag : function(event, ui) { 
    expandParent("#parentElement", "#dragElement"); 
} 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", "+=2"); 
    } 
} 

。残念ながら、これは20ピクセル後に停止します。その後、マウスボタンを離し、再度サイズを変更/ドラッグして領域をさらに拡張する必要があります。あなたはそれがなぜなのか考えていますか？

Answer 1

jQuery UIによってコンテナ境界が設定されているため、マウスを離すまではexpandParent関数が機能しません。

だから私はここ2つのソリューションのいずれかを考えることができるが、エレガントであり、他は明らかにエレガントな解決策は、下部に自由であるあなた自身含むメソッドを書くことになる

トリッキーです。

しかし、私は擬似親要素を使用し、その高さを1000または高さのウィンドウのような大きな値に設定してから、実際の親に対してオーバーフロー隠し属性を設定するというトリッキーな解決策を持っています。私はちょうどあなたのコードか何かをテストしなくても、あなたのアイデア

Answer 2

JQuery UI内部のように見えますが、ドラッグの開始時に親の情報を保持しているので、サイズを変更してもドラッグが制限されます。

独自の封じ込め枠を設定することができます。

$("#dragElement") 
    .draggable({ 
     cursor  : "move", 
     scroll  : false, 
     containment : [20, 20, 400+20, 1000], 
     drag : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }) 
    .resizable({ 
     containment : "parent", 
     resize : function(event, ui) { 
      expandParent("#parentElement", "#dragElement"); 
     } 
    }); 

function expandParent(parentName, childName) { 
    var dragEl = $(childName); 
    var dragElTop = parseInt(dragEl.css("top"), 10); 
    var dragElHeight = parseInt(dragEl.css("height"), 10); 
    var dragElBottom = dragElTop + dragElHeight; 
    var parentEl = $(parentName); 
    var parentElBottom = parseInt(parentEl.css("height")); 
    if(parentElBottom <= dragElBottom + 20) { 
     parentEl.css("height", dragElBottom+20); 
    } 
} 

上記のコードでは、親のサイズを1000 + 20まで変更できます。 上記のコードhere (JSFiddle)を試すことができます。

ダイナミックコンテナを実行する必要がある場合は、最初と（resizeメソッドで）新しいコンテナを正しいBoundingBoxで設定します。

var p = $("#parentElement"); 
var dragWidth = parseInt($("#dragElement").css('width')); 
var left = p[0].offsetLeft; 
var top = p[0].offsetTop; 
var width = parseInt(p.css("width"), 10)-dragWidth; 
var containment = [left, top, width+left, 1000]; 

ええ、私は解決策は、一種のハックである知っている..しかし、とにかく、私はちょうどJSFiddleを更新このソリューションは、計算し、コンテナの再設定を動的サイズしないかもしれません。ちょうどJSFiddleをうまく動作させたいと思っていました。

Answer 3

$("#dragElement") 
     .draggable({ 
      cursor  : "move", 
      containment : '#Container', 
      drag : function(event, ui) { 
       var growAmount = 10; 
       var cont = $('#Container'); 
       var item = $(ui.helper); 

       var itemOffset = item.offset(); 
       itemOffset.bottom = itemOffset.top + dProps.item.height(); 


       var contOffset= cont.offset(); 
       contOffset.bottom = contOffset.top + cont.height(); 

       if(itemOffset.bottom >= contOffset.bottom){ 
        var inst = item.draggable("instance"); 
        inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount]; 
        cont.height(parseInt(cont.height()) + growAmount); 
       } 
      } 
     });