javascript drag&drop 구현

Javascript

• Drag
  드래그하고 싶은 엘리먼트에 드래그 가능여부 속석을 추가하고 드래그시 발생할 이벤트를 등록한다.
  
  1. 먼저 드래그 하고 싶은 엘리먼트에 draggable 속성을 true로 작성한다.
     <div id="draggable" draggable="true"></div>
     아직 draggable는 드래그 되는것 외에는 어떠한 기능도 없다.
  2. ondragstart 이벤트를 등록한다.
     <div id="draggable" draggable="true" ondragstart="drag()"></div>
     ondragstart이벤트를 통해 앨리먼트가 드래그 되면 drag() 함수를 호출한다.
• Drop
  드래그한 엘리먼트를 드롭받을 엘리먼트를 정할 수 있다.
  드롭받는 엘리먼트에는 ondrop, ondragover 두가지 이벤트를 등록할 수 있다.
  
  1. ondragover는 드래그된 엘리먼트가 드랍될 수 있을때 발생한다.
     <div id="droppable" ondragover="ondrag(event)"></div>
     기본적으로 엘리먼트는 다른 엘리먼트로 드롭될 수 없기때문에 기본 이벤트를 제한해야한다.
     ondrag함수내에 event.preventDefault()를 작성하면 ondragover의 디폴트 이벤트가 호출되지 않는다.
  2. 드래그한 엘리먼트를 drop할때 발생한 이벤트를 등록한다.
     <div id="droppable" ondrop="drop(event)"></div>
     드래그된 엘리먼트가 droppable에 drop되면 drop()함수가 호출된다.
• javascript 만으로 drag&drop자체의 구현은 어렵지 않지만 다양한 기능을 사용하기위해서는 브라우져별로 구현해줘야 할 것들이 많다. 브라우저에 영향없이 다양하고 강력한 기능이 있는 jQueryui의 dragNdrop에 대해서 알아보겠다.

jQueryui

• Drag
  드래그 하고 싶은 엘리먼트를 선택하고 draggable() 함수를 호출하는것 만으로 엘리먼트는 드래그 된다.
  javascript와는 다르게 추가 함수 없이도 드래그된 엘리먼트는 그자리에 머문다.
  $( ".selector" ).draggable();
  drag기능은 jqueryui - interactions - draggable widget 에서 찾아 볼 수 있다.
  크게 options, methods, events로 나뉜다.
  
  1. options
     드래그 하는 엘리먼트의 옵션을 설정한다. draggable이벤트 등록시 옵션값을 등록할 수 있다.
     $( ".selector" ).draggable({ optionName: ontionValue });
     이미 선언된 draggable 엘리먼트에서 option값을 얻어 오거나 추가 할 수 있다.
     var axis = $( ".selector" ).draggable( "option", "axis" ); // Getter
     $( ".selector" ).draggable( "option", "axis", "x" ); // Setter
     다음은 유용한 option값 몇가지를 설명하겠다.
     
     • cancel : selector
       selector에 해당하는 엘리먼트는 드래그가 불가능하다.
     • cursor : cursorName 드래그하는동안 커서의 모양을 바꿔준다.
     • cursorAt : { top: , left: ,..} 드래그시작시 마우스 커서와 엘리먼트의 위치를 설정한다.
     • revert : true or invalid or valid
       설정 값에 따라 드래그엘리먼트를 드랍했을때 원래의 위치로 가지고 올것인지 판단한다.
     • stack : selector selector간에 z-index를 조정해 드래그되고있는 엘리먼트를 가장 앞으로 가지고 온다.
• Drop
  드래그된 엘리먼트가 드랍될때 발생하는 이벤트들을 설정할 수 있다.
  $( ".selector" ).droppable();
  기본적으로 드래그 엘리먼트와 사용방법은 같지만 특성상 아무 변화도 없다.
  droppable역시 options, methods, events로 나뉘게 되고 events를 가장 많이 사용하게 된다.
  
  1. events
     droppable 엘리먼트가 특정 조건하에 있을때 함수를 호출 할 수있다.
     $( ".selector" ).droppable({ drop: function( event, ui ) {} });
$( ".selector" ).on( "drop", function( event, ui ) {} );
     droppable등록시 events설정하는 방법과 drop 이벤트 이벤트리스너 등록 방법이 있다.
     
     • drop : 허용된 drabble이 droppable에 드롭될때 발생
     • over : 허용된 drabble이 droppable에 드래그 되고 있을때 발생

마치며

프로젝트를 수행하며 처음에는 javascript만으로 drag&drop을 구현해서 사용했지만 구현하면서 event.target.id 같이 모든 브라우져에서 지원하지 않는 기능은 브라우져 별로 구현해야 했다. 또, 드래그엘리먼트간의 z-index 조절, 드래그시 발생하는 엘리먼트잔상등 해결할 수 없거나 구현하기 힘든 기능들을 jQueryui기능을 통해 쉽게 구현해 볼 수 있었다. 다음번에는 기능의 사용뿐만아니라 jquery, jqueryui의 소스를 파헤쳐 보는 기회를 가져야겠다.