jQuery UI Draggable：カスタムスナップ方法

Question

jQuery UI APIにはsnap,snapMethod、snapToleranceが組み込まれていますが、この場合は動作しません。

私が直面している問題は次のとおりです。コンテナ内をドラッグすると、ある距離以内にドラッグするとコンテナの端にスナップすることができます。距離を計算し、これを引き起こすことは問題ではありません。それは私が仕事に得ることができないスナップにドラッグ可能になっています。

$draggable.position().left = 0;は、親コンテナの左端にスナップするかもしれませんが、違いはありません。ここで

を実証するためのフィドルです：https://jsfiddle.net/jwxrevL2/1/

JS：

//set draggable 
$('.drag').draggable({ 
    drag: function(){ drag($(this)) }, 
    containment: 'parent', 
}); 

//drag 
function drag($draggable){ 
    var snap_tolerance = 10; 

    //Draggable 
    var d_top  = $draggable.position().top; 
    var d_middle = ($draggable.position().top+($draggable.height()/2)); 
    var d_bottom = ($draggable.position().top+$draggable.height()); 

    var d_left = $draggable.position().left; 
    var d_center = ($draggable.position().left+($draggable.width()/2)); 
    var d_right = ($draggable.position().left+$draggable.width()); 

    //Wrapper 
    var $wrapper = $('.wrapper'); 
    var w_top  = 0; 
    var w_bottom = $wrapper.height(); 

    var w_left = 0 
    var w_right = $wrapper.width(); 

    //snap to left 
    if(d_left <= (w_left+snap_tolerance)){ 
    console.log('snap left'); 
    $draggable.position().left = w_left; 
    within_snap = true; 
    } 

    //snap to right 
    if(d_right >= (w_right-snap_tolerance)){ 
    console.log('snap right'); 
    $draggable.position().left = (w_right-$draggable.width()); 
    within_snap = true; 
    } 

    //snap to top 
    if(d_top <= (w_top+snap_tolerance)){ 
    console.log('snap top'); 
    $draggable.position().top = w_top; 
    within_snap = true; 
    } 

    //snap to bottom 
    if(d_bottom >= (w_bottom-snap_tolerance)){ 
    console.log('snap bottom'); 
    $draggable.position().top = (w_bottom-$draggable.height()); 
    within_snap = true; 
    }  

}//end fn drag 

Answer 1

私はそれが動作を取得するために管理しているしました。私は、何が起こっているのか完全に理解していないと言わなければならないが。これらは私が行った変更（updated fiddle）は次のとおりです。

//set draggable 
$('.drag').draggable({ 
    drag: function(e, ui){ drag($(this), ui) }, 
    containment: 'parent', 
}); 

だからドラッグイベントに私は、UIオブジェクトだけでなく、jQueryオブジェクトを渡し、私はUIオブジェクトについて間違っていた場合（私が思うに、私を修正してください）をdrag関数に追加します。

私は位置にそれをスナップすることができます uiオブジェクト position.leftプロパティを更新することによって、その後

//snap to left 
if(d_left <= (w_left+snap_tolerance)){ 
    console.log('snap left'); 
    ui.position.left = w_left; 
    within_snap = true; 
} 

。

jQueryオブジェクトではなくuiを使用する理由は誰でも説明できますか？

Answer 2

ここでは一例です。

あなたはそうのようなグリッドを指定する必要があります。

<script> 
$(function() { 
    $("#draggable4").draggable({ grid: [ 20, 20 ] }); 
    $("#draggable5").draggable({ grid: [ 80, 80 ] }); 
}); 
</script> 

https://jsfiddle.net/m3r2xra3/