DragEvent

• drag : 요소 또는 텍스트 선택이 드래그 될 때 시작된다.

 

• dragend : 드래그 작업이 종료 될 때 (마우스 버튼을 놓거나 Esc 키를 눌러) 시작된다.

 

• dragenter : 드래그 한 요소 또는 텍스트 선택 항목이 유효한 드롭 대상에 들어가면 시작된다.

 

• dragexit : 요소가 더 이상 드래그 작업의 즉시 선택 대상이 아닌 경우 시작된다.

 

• dragleave : 드래그 한 요소 또는 텍스트 선택이 유효한 드롭 대상을 벗어날 때 시작된다.

 

• dragover : 요소 또는 텍스트 선택이 드래그되고 마우스 포인터가 유효한 놓기 대상 위에있을 때 연속적으로 발생한다.

 

• dragstart : 사용자가 요소 또는 텍스트 선택 드래그를 시작하면 시작된다.

 

• drop : 요소 또는 텍스트 선택이 유효한 놓기 대상에 놓일 때 시작된다.

 

사용 예시

$imageContain.on("dragenter", function(e) { //드래그 요소가 들어왔을떄
    $(this).addClass('drag-over');
}).on("dragleave", function(e) { //드래그 요소가 나갔을때
    $(this).removeClass('drag-over');
}).on("dragover", function(e) {
    e.stopPropagation();
    e.preventDefault();
}).on('drop', function(e) { //드래그한 항목을 떨어뜨렸을때
    e.preventDefault();
    $(this).removeClass('drag-over');
});

 

- stopPropagation() : 부모 태그로의 이벤트 전파를 중지시키기 위해 사용한다.

 

- preventDefault() : 고유 동작을 중단시키기 위해 사용한다. 예를 들어 a 태그를 클릭했을 때, preventDefault()로 인해 href 링크로 이동하지 않게 할 수 있다.

 

 

출처 :  https://developer.mozilla.org/ko/docs/Web/API/DragEvent
         https://sub0709.tistory.com/46