Html5 끌어서 놓기 위치에서 드롭 위치를 알아내는 방법

Question

나는 html5로 JqueryUi droppable을 대체하려고합니다.

그리고 나는 드롭 순간에 드래그 가능한 객체의 정확한 위치를 알아야합니다.

나는 마우스가 clientX와 clientY 인 것을 알고 있지만 드래그를 시작한 위치에 따라 변경됩니다.

위치 또는 개체 자체가있는 방법이 있습니까?

감사합니다.

Answer 1

당신은 당신이 방울 와이어 최대 그것에 dragenter, dragover, dragleave 및 drop 이벤트를 수용 할 목표를 식별해야합니다. 아직 보지 않았다면 이것 좀보세요 : https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop. 거기에있는 어딘가에서 이벤트 중 하나에서 드래그 된 요소의 x 및 y 위치에 액세스 할 수 있다는 것을 기억합니다.

• 의 dragEnter이 뭔가를 끄는 동안 마우스가 컨트롤에 들어가면 호출됩니다

  여기에 내 자신의 연구에서 발견 dragenter 및 dragover 차이점에 대한 몇 가지 추가합니다.

• 마우스가 해당 사각형에있는 상태에서 드래그하는 동안 DragOver가 호출됩니다.

사각형은 방울을 수신하는 대상 요소를 나타냅니다. 그것들은 here입니다.

Answer 2

<script type="text/javascript"> 
    var dragX; 
    var dragY; 

    $("body").bind("dragover", function (e) { 
     dragX = e.pageX, dragY = e.pageY; 
     console.log("x=" + dragX + " and y="+ dragY); 
    }); 

</script>