[HTML5]Drag and Drop을 사용해보자.

 
 

※본 예제는 크롬에서 테스트했습니다.

 
 

여기선 약간의 자바스크립트와 CSS 를 사용합니다.

 
 

저도 웹쪽으론 처음 접하는 부분이라 공부하는 마음으로 ‘이런식으로 사용하는가보다……’ 정도로 생각하면서 해봤습니다.

 
 

먼저 결과부터 보여드립니다.

 
 

실행 결과는 단순히 오렌지색 상자를 옥색 상자로 약간의 제한 조건을 두고 옮가는 기능입니다.

 
 







 
 

 
 

이제 본격적으로 드래그 앤 드롭 API를 보면

∙ draggable

∙ ondragenter

∙ ondragover

∙ ondrop

∙ ondragstart

∙ ondragend

 
 

첫번째 draggable 만 제외하면 아래 5가지 api는 이벤트 핸들러로 

자바스크립트의 함수와 연결시켜 이벤트를 처리한다

Draggable은 HTML5 에 있는 개체를 이동시킬 수 있는지 여부를 지정할 수 있다.

 
 

 
 

이제 옥색 상자(앞으로 통이라고 함)를 만들어보자.

<div id=“target1”

    ondragenter=“return enter(event)”

    ondragover=“return over(event)”

    ondrop=“return drop(event)”>

    <div id=“draggable1”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>1

    </div>

    
 

    <div id=“draggable2”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>2

    </div>

    
 

    <div id=“draggable3”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>3

    </div>

</div>

 
 

각 통에는 이벤트가 일어날 종류를 지정해 주는 코드가 필요하다. 

오렌지 상자(앞으로 상자라고 함)가 드래그를 통해 통의 위에 올라왔을 경우,

상자가 드래그를 시작했을 경우, 등의 여러가지 이벤트를 등록해주고 처리해주어야 한다.

그래야지만 상자가 1번통에서 2번통으로 D&D를 통해 내려놓았을 때

상자가 Drop된 2번통으로 이동이 되기 때문이다.

그래서 각 통은 ondragenter=”return enter(event)” 의 형식의 코드를 추가해준다.

 
 

다음은 상자를 추가해보자.

초기상태를 1번 통에 넣을 것이기 때문에 target1에 3개의 상자를 생성한다.

<div id=“target1”

    ondragenter=“return enter(event)”

    ondragover=“return over(event)”

    ondrop=“return drop(event)”>

    <div id=“draggable1”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>1

    </div>

    
 

    <div id=“draggable2”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>2

    </div>

    
 

    <div id=“draggable3”

        draggable=“true”

        ondragstart=“return start(event)”

        ondragend=“return end(event)”>3

    </div>

</div>

 
 

통과 마찬가지로 이벤트 핸들러 등록을 해준다.

 
 

이로서 body 부분의 코딩은 끝났지만

이렇게 코드를 완성해도 결과 사진과 달리 색이 전혀 없을 것이다.

그래서 css 코드를 통해 style 을 추가한다.

style코드는 HTML의 head 부분에 추가한다.

통이나 상자를 보면 각 id가 보일 것이다.

이것을 통해 각 속성을 부여하고 색을 입힐 수 있다.

<style type=“text/css”>

#target1,#target2,#target3 {

    floatleft;

    width250px;

    height250px;

    padding10px;

    margin10px;

}

 
 

#draggable1,#draggable2,#draggable3 {

    width75px;

    height70px;

    padding5px;

    margin5px;

}

 
 

#target1 {

    background-colorcyan;

}

 
 

#target2 {

    background-colorcyan;

}

 
 

#target3 {

    background-colorcyan;

}

 
 

#draggable1 {

    background-colororange;

}

 
 

#draggable2 {

    background-colororange;

}

 
 

#draggable3 {

    background-colororange;

}

</style>

#을 통해 아이디를 식별한다고 생각하면

나머지는 직관적으로 알 수 있을 것 같다.

이곳까지 했으면 외관은 그럴싸하게 갖추었다고 볼 수 있다.

하지만 정작 중요한 드래그&드롭 기능이 되질 않으니

이제부터 구현하도록 한다.

 
 

그럼 이제 본격적으로 처리를 해주는 자바스크립트를 작성하자.

모든 함수는 function FUNC_NAME(EVENT) 형식으로 작성한다.

여기서 알아두어야 할 변수가 EVENT 변수가 들어가는 e 인데

사용자가 Drag&Drop을 하는 동작의 정보를 e 변수를 통해서 알 수 있다.

e의 함수중 effectAllowed함수는어떤 형태의 동작을 지원할 지 명시해야 한다.

그리고 setData함수를 통해 이동시킬 상자의 데이터를 저장한다.

마지막으로 setDragImage는 드래그될 개체의 이미지를 명시할 수 있다.

<script type=“text/javascript”>

    function start(e) {

        e.dataTransfer.effectAllowed = ‘move’;

        e.dataTransfer.setData(“Data”, e.target.getAttribute(‘id’));

        e.dataTransfer.setDragImage(e.target, 0, 0);

 
 

        return true;

    }

 
 

    function enter(e) {

        return true;

    }

 
 

    function over(e) {

        var iddraggable = e.dataTransfer.getData(“Data”);

        var id = e.target.getAttribute(‘id’);

 
 

        if (id == ‘target1’)

            return false;

 
 

        if (id == ‘target2’ && iddraggable == ‘draggable3’)

            return false;

        else if (id == ‘target3’

                && (iddraggable == ‘draggable1’ || iddraggable == ‘draggable2’))

            return false;

        else

            return true;

    }

 
 

    function drop(e) {