HTML glisser-déposer - une zone de drop

Question

que je fais un site et DnD lorsque vous déposez l'image dans la div sur le côté droit, il ne reste pas dans la position désirée (zone verte)
https://i.stack.imgur.com/xKft0.jpg
Comment Je fais tomber libre?

Merci pour tout et désolé pour mon mauvais anglais

Answer 1

Voici un parfait exemple de la libre circulation tout en claquant une grille ou un autre élément. J'espère que cela aide!

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

Comme vous pouvez le voir sur la source de l'élément de pignon d'entraînement peut se déplacer librement, mais nous donnons aussi la possibilité de casser certains éléments à l'aide « pression ».

$(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 ] }); 
    }); 

Aussi est ici un exemple de revenir l'élément nouveau à sa position d'origine si elle n'est pas cassé à un autre élément.

$(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