내 잔이 넘치나이다.

Drag and Drop

Drag 

drag - 자신이 드래그 중일 때

dragstart - 자신이 드래그를 시작했을 때

dragend - 자신이 드래그를 종료했을 때

Drop

dragenter - 자신의 영역에서 드래그가 들어왔을 때

dragleave - 자신의 영역에서 드래그가 벗어났을 때

dragover - 자신의 영역에서 드래그가 일어나고 있을 때

drop - 자신의 영역에서 드래그가 종료했을 때

예)

<script>

$(document).ready(function () {

$('h1').on({

dragstart: function (event) {

$(this).addClass('active');

},

dragend: function (event) {

$(this).removeClass('active');

}

});

$('div').on({

dragenter: function (event) {

$(this).addClass('active');

},

dragleave: function (event) {

$(this).removeClass('active');

},

dragover: function (event) {

event.preventDefault();

/* event 의 기본적인 action을 막는다. */

/* DROP 이벤트가 동작하지 않는다. drogover 이벤트 발생으로 처리(?) */

/* dragover  이벤트를 삭제해도 DROP 이벤트가 동작하지 않는다. */

/* dragover 이벤트를 추가하니 DragLeave 이벤트가 동작하지 않는다. */

/* DragOver 와 DragLeave 이벤트는 상호 연관작용이 있다. */

},

drop: function (event) {

$('h1.active').appendTo(this);

}

});

});

</script>

파일 드래그

drag_drop_file.html

dragover 이벤트의 기본 이벤트를 제거해야 drop 이벤트를 사용할 수 있습니다.

drop 이벤트의 기본 이벤트를 제거해야 웹 브라우저에 파일을 불러오는 것을 막을 수 있습니다.

일반 웹 브라우저에 여러 개의 이미지 파일을 선택해서 Drop 하면 그 중에서 1개만 브라우저에 open 된다.

하지만, 위의 html 파일의 실행 결과에서는 여러 개의 이미지 파일을 선택해서 Drop 하면

선택된 모든 이미지 파일이 브라우저에 drag&drop 되서 display 되어진다.