jQuery UI-Draggable: Benutzerdefinierte Snap-To-Methode

Question

Ich weiß, dass die jQuery UI-API snap, snapMethod und snapTolerance eingebaut hat, aber diese werden in diesem Fall nicht funktionieren.

Hier ist das Problem, dem ich gegenüberstehe: Wenn ich innerhalb eines Containers schleppe, möchte ich, dass das Ziehbare an den Kanten des Containers einschnappt, wenn es sich in einer bestimmten Entfernung befindet. Entfernungen zu berechnen und auszulösen ist kein Problem. Es wird das Ziehbare zum Einrasten gebracht, das ich nicht zur Arbeit bringen kann.

Ich erwartete etwas wie: $draggable.position().left = 0; könnte es an der linken Kante des übergeordneten Containers einrasten, aber es macht keinen Unterschied. Hier

ist eine Geige zu demonstrieren: 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

Ich habe es geschafft, um es zu arbeiten. Obwohl ich sagen muss, ich verstehe nicht ganz, was vor sich geht. Dies sind die Änderungen, die ich gemacht habe (updated fiddle):

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

So auf dem Drag-Ereignis ich das ui Objekt als auch die jQuery-Objekt übergeben (ich glaube, bitte korrigieren Sie mich, wenn ich falsch bin über das Objekt ui) in die drag Funktion.

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

dann durch die ui Objekte position.left Eigenschaft Aktualisierung kann ich sie einrasten.

Kann jemand erklären, warum es ui anders als das jQuery-Objekt anders ist?

Answer 2

Hier ist ein Beispiel.

Sie benötigen ein Raster festlegen, wie so:

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

https://jsfiddle.net/m3r2xra3/