HTML의 드래그 앤 드롭 - 떨어 뜨리 지역

Question

(녹지)
https://i.stack.imgur.com/xKft0.jpg
어떻게을 내가 드래그 & 드롭에 사이트를하고 있어요 당신이 오른쪽에있는 DIV의 이미지를 삭제할 때 원하는 위치에 있지 않을 내가 떨어지는 걸까? 에 대한 모든 것을 미안 대한

덕분에 내 격자 또는 다른 요소에 스냅 동안 여기

Answer 1

무료 운동의 좋은 예 나쁜 영어. 희망이 도움이됩니다!

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

원본에서 볼 수 있듯이 드래그 박공 요소가 자유롭게 이동할 수 있지만, 우리는 또한 그것을 '스냅'을 사용하여 특정 요소에 스냅 할 수있는 옵션을 제공합니다.

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

또 다른 요소에 스냅되지 않으면 요소를 원래 위치로 되 돌리는 예제입니다.

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