1

これは可能ですか：ドラッグ可能な要素を作成して、特定のドロップ可能な要素の上にドラッグしたときに、ドラッグ可能な要素の包含オプションがドロップ可能な要素に設定されるようにしますか？これにより、ドロップ可能な要素の上に何かをドラッグすると、ドラッグ可能な要素がドロップ可能な要素の範囲にロック/スタックするという効果が作成されます。

以下は私のコードからの抜粋ですが、上記の効果は得られません。

var droppable_position = $('#droppable').position();
$('#draggable').draggable({
    helper: 'clone',
    drag: function (event, ui) {
        if (ui.position.left > droppable_position.left && ui.position.top > droppable_position.top)
        {
            $('#draggable').draggable('option', 'containment', '#droppable');
        }
    }
});
4

1 に答える 1

2

ドラッグする要素の位置を上書きできます。

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

このフィドルは、位置のオーバーライドの例です：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-10-27T22:31:52.993 に答える