0

ドラッグ可能な div("dragging") とターゲット div("dragto") があります。

「ドラッグ」div が十分にドラッグされて「dragto」div の上にある場合、「ドラッグ」div の包含は「dragto」div の [x1,y1,x2,y2] に設定されます。そのため、その div に入ると、その div を離れることはできません。

このコンテインメントは、ドラッグが終了する前と開始した後に設定されます。つまり、「ドラッグ」div が「dragto」div 内にあるかどうかを確認できるドラッグ機能中に設定されます。

出来ますか。次のコードを追加すると:

drag : function (event,ui){

   $("#dragging").draggable("option","containment",[x1,y1,x2,y2]);
   },

これは、ドラッグが停止したときにのみ、格納を設定します。

4

3 に答える 3

0

これは既存の機能ではありませんが、ドラッグする要素の位置を上書きすることで理解できます。

これは「すぐに使える」コードではなく、自分自身を開発することを可能にする部分です。ドロップ可能な要素のホバーイベントで包含位置変数を設定し、ドラッグ要素のドラッグイベントで現在のドラッグ位置でそれらをテストするという考え方です。

このフィドルは、位置のオーバーライドの例です：http: //jsfiddle.net/QvRjL/74/

このフィドルは、ドラッグされた要素がコンテナの境界の近くにあるかどうかを確認する方法の例です：http: //jsfiddle.net/pPn3v/22/

位置上書きの例：

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
}); 

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});
于 2012-11-03T07:02:22.177 に答える