HTML Drag and Drop - Dropping Gebiet

Question

ich eine Website in DnD tun, und wenn Sie das Bild im div auf der rechten Seite fallen es nicht in der gewünschten Position (grünen Bereich) bleibt
https://i.stack.imgur.com/xKft0.jpg
Wie kann Ich lasse es fallen?

Vielen Dank für alles und sorry für mein schlechtes Englisch

Answer 1

Hier ist ein perfektes Beispiel für die Bewegung frei, während auf ein Gitter oder ein anderes Element einrasten lassen. Ich hoffe es hilft!

https://jqueryui.com/draggable/#snap-to

Wie Sie aus dem Quellelement der Schlepp Giebel sehen sich frei bewegen können, aber wir haben es auch die Möglichkeit geben, auf bestimmte Elemente zu schnappen mit ‚Snap‘.

$(function() { 
    $("#draggable").draggable({ snap: true }); 
    $("#draggable2").draggable({ snap: ".ui-widget-header" }); 
    $("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer" }); 
    $("#draggable4").draggable({ grid: [ 20, 20 ] }); 
    $("#draggable5").draggable({ grid: [ 80, 80 ] }); 
    }); 

Auch hier ist ein Beispiel für das Element das Zurücksetzen auf seine ursprüngliche Position ist, wenn es nicht zu einem anderen Element aufgeschnappt.

$(function() { 
    $("#draggable").draggable({ 
     revert : function(event, ui) { 
      // on older version of jQuery use "draggable" 
      // $(this).data("draggable") 
      // on 2.x versions of jQuery use "ui-draggable" 
      // $(this).data("ui-draggable") 
      $(this).data("uiDraggable").originalPosition = { 
       top : 0, 
       left : 0 
      }; 
      // return boolean 
      return !event; 
      // that evaluate like this: 
      // return event !== false ? false : true; 
     } 
    }); 
    $("#droppable").droppable(); 
}); 

Revert a jQuery draggable object back to its original container on out event of droppable