2

JQueryにドラッグ可能な要素があり、特定の領域にドラッグするとグリッドがあり、別の領域にドラッグするとグリッドがありません(またはグリッドが[1,1]に設定されています) 、 同じこと）。これが私のコードです：

$('#draggableThing').draggable({
        drag:function(){
            if (isOverRegionWthGrid()) 
            {
                $(this).draggable('option','grid',[1,20])
            }
            else
            {
                $(this).draggable('option','grid',[1,1])
            }}})

これまでのところ素晴らしい作品。唯一の問題は、グリッドのない領域からグリッドのある領域にドラッグすると、グリッドの「オフセット」に一貫性がないことです。ドラッグするたびに数ピクセル上下に変化しないグリッドに合わせる必要があります。JQuery は、ドラッグ可能な要素の初期位置によってグリッドを定義しているようです。グリッドに絶対位置を与える意見、または回避策はありますか?

ありがとう！

4

2 に答える 2

0

1、20 に戻すときは、モジュロ除算を使用して必要なグリッド内の座標にスナップするドラッグ可能オブジェクトを移動することをお勧めします。例: (currentX - gridOriginX) % cellWidth、(currentY - gridOriginY) % cellHeight。

次の例では、ドラッグ可能な要素の元の位置を使用して、グリッドの位置を決定しています。また、「ドラッグ」イベントの代わりに、ドロップ可能な「オーバー」イベントを使用してこれを行いました。

HTML:

<div id="thing">
<div id="draggable5" class="draggable ui-widget-content">
  <p>Drag Me</p>
</div>
</div>
<div id="thing2">
</div>

CSS:

#draggable5 {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
}
#thing {
    height: 150px;
    border: 1px solid #900;
}
#thing2 {
    height: 150px;
    border: 1px solid #00F;
}

Javascript:

$(document).ready(function () {

    var obj = $("#draggable5");
    obj.draggable( {
        grid: [ 1, 20 ], 
    } ).data("init", obj.offset());

    $("#thing").droppable({
        over: function(e, ui) {
            obj = ui.draggable;
            var init = obj.data("init");
            var here = obj.offset();
            here.top = init.top + Math.floor((here.top - init.top) / 20) * 20;
            here.left = init.left + Math.floor((here.left - init.left) / 1) * 1;
            obj.offset(here);
            obj.draggable( "option", "grid", [ 1, 20 ] );
        }
    });
    $("#thing2").droppable({
        over: function(e, ui) {
            obj = ui.draggable;
            obj.draggable( "option", "grid", [ 1, 1 ] );
        }
    });
});

フィドル: http://jsfiddle.net/qaqDz/3/

于 2013-05-16T01:44:43.387 に答える