[HTML5] 드래그 앤 드롭(drag and drop)

들어가기

HTML5에서 드래그앤드롭 기능에 대해서 알아보자. 먼저 테스트위한 기본 구성을 하고 실제 코드를 작성할 예정이다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

기본 구성

먼저 기본적인 화면 구성 및 CSS 내용이다.

HTML 바디

<div class="foo" id="foo">
    <div class="bar">
        Drag Me
    </div>
</div>
<div class="dropzone">
</div>

스타일

.foo {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}
.bar {
    /* width: 100px; */
    /* height: 100px; */
    cursor: grab;
    background-color: blueviolet;
    text-align: center;
}
.dropzone {
    width: 200px;
    height: 200px;
    background-color: black;
}

Drag 설정

먼저 div를 드래그 할 수 있도록 설정이 필요하다. draggable=”true”를 해줘야 한다. 그리고, 드롭할 영역은 droppable=”true”을 해줘야한다. 그러면 자동으로 드래그하는 대상이 드롭할 영역으로 인지하게 된다.

<div class="foo" id="foo">
    <div class="bar" draggable="true">
        Drag Me
    </div>
</div>
<div class="dropzone" droppable="true">
</div>

드래그 와 드롭에 대한 동작 구현

총 4가지 이벤트 핸들러를 정의해줘야한다.

• ondragstart: 드래그를 시작할 때 호출됨
• ondragover: 드래그 중에 마우스가 오버될 때 호출됨
• ondragend: 드래그가 끝나면 호출됨
• ondrop: 드롭될때 호출됨

<div class="foo" id="foo">
    <div class="bar" draggable="true" ondragstart="onDragStart(event)" ondragend="onDragEnd(event)">
        Drag Me
    </div>
</div>
<div class="dropzone" droppable="true" ondragover="onDragOver(event)" ondrop="onDrop(event)">
</div>

동작하는 함수를 정의해보자.

// 드래그 시작되면 부모기준으로 드래그 이미지 표시 및 가져갈 데이터 지정
function onDragStart(ev) {
    console.log('> onDragStart', ev.target);
    var parent = ev.target.parentElement;
    ev.dataTransfer.setDragImage(parent, 0, 0);
    ev.dataTransfer.setData('targetId', ev.target.parentElement.id);
}
// 드래그 끝을 표시
function onDragEnd(ev) {
    console.log('> onDragEnd', ev.target);
}
// 드레드 오버되면 이벤트를 쳐리하지 않도록 함
function onDragOver(ev) {
    // console.log('> onDragOver', ev.target);
    ev.preventDefault();
    //return false;
}
// 드롭되면 가져온 데이터를 처리함
function onDrop(ev) {
    ev.preventDefault();
    console.log('> onDrop', ev.target);
    var targetId = ev.dataTransfer.getData('targetId');
    ev.target.appendChild(document.getElementById(targetId));
}

참조

[1] https://jsfiddle.net/5f9ujr2w/

[2] https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

[3] https://webisfree.com/2019-11-22/html5%EC%9D%98-%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%9E%8D-%EA%B5%AC%ED%98%84-%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C-drag-and-drop

[4] https://sortablejs.github.io/Vue.Draggable/#/simple