[HTML]기본속성 draggable이용하기

draggable="true" 를 이용해 드래그가 가능한 속성으로 만들어줄수 있고, 간단하게 드래그앤 드롭 기능을 이용할 수 있다!

 

<div class="drag-box" draggable="true" ondrag="drag_handler(event);">drag</div>
<div class="drop-box" ondragover="dragover_handler(event);" ondrop="drop_handler(event);"></div>

 

draggable="true" 엘리먼트에는 ondrag 이벤트를 등록해야하고,

drop영역을 지정해 ondragover 또는 ondrop으로 원하는 이벤트를 등록해 원하는 효과를 얻어낼 수 있다. 

모바일에서는 touch 이벤트를 통해 구현해야하는 불편함이 있다.

 

 

 

 

 

 

 

jquery ui 로 좀더 자연스러운 느낌과 다양한 이벤트를 이용해 쓸수 있다. (모바일도 함께 구현 가능..)

 

[javascript/jQuery] - [JAVASCRIPT/JQUERY] Jquery UI (draggable/droppable)옵션설정하기