[ JS : drag & drop ] 초간단 드레그 앤 드랍

이 글은 event.target을 이용해서 drag drop을 한다.

 

event.target을 간단하게 설명하자면

내가 클릭한 html을 인지해주는 편리한 요소?!다.

 

HTML

<div class="container">
    // 왼쪽 박스
    <div id="left">
    	// list에는 draggable 속성을 부여했다.
        <div class="list" draggable="true">
            list
        </div>
        <div class="list" draggable="true">
            list
        </div>
        <div class="list" draggable="true">
            list
        </div>
    </div>
	// 가운데 박스
    <div id="middle">

    </div>
    // 오른쪽 박스
    <div id="right">

    </div>
</div>

draggable

drag를 가능하게 해준다.

 

 

JS 들어가기전 초간단 이벤트 설명

drag & drop event

1. dragstart:  드래그 작업이 시작될 때 발생한다. 이 이벤트는 draggable 속성을 가지고 있는 html에 적용이 가능하다.
2. dragend: 드래그 작업이 끝날 때 발생한다. 드래그가 성공적으로 완료되었을 때나, 드래그 작업이 중단되었을 때 모두 발생할 수 있다
3. dragover:  드롭 대상 요소 위에서 드래그된 요소가 움직일 때 발생. 이 이벤트 핸들러 내에서 preventDefault()를 호출하여 드롭을 허용하도록 설정한다.
4. drop:  드래그된 요소가 드롭되었을 때 발생한다.

JS

let lists = document.querySelectorAll('.list')
let rightBox = document.getElementById('right')
let leftBox = document.getElementById('left')
let middleBox = document.getElementById('middle')

for (list of lists) {
    list.addEventListener("dragstart", (e) => {
        let selected = e.target

        rightBox.addEventListener('dragover', (e) => {
            e.preventDefault()
        })
        rightBox.addEventListener('drop', (e) => {
            rightBox.appendChild(selected)
            selected = null
        })
        middleBox.addEventListener('dragover', (e) => {
            e.preventDefault()
        })
        middleBox.addEventListener('drop', (e) => {
            middleBox.appendChild(selected)
            selected = null
        })
        leftBox.addEventListener('dragover', (e) => {
            e.preventDefault()
        })
        leftBox.addEventListener('drop', (e) => {
            leftBox.appendChild(selected)
            selected = null
        })

    })
}

• 1. selected = null 을 준 이유
     중복해서 같은 요소를 여러 번 드래그 앤 드롭하는 것을 방지한다. 만약에 null을 주지 않는다면 event.target이 중복이 된다.
  2. 직접 지워봐서 어떻게 되는지 확인해보기!

css

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    height: 500px;
}

#left, #right, #middle{
    border: 1px double black;
    height: 300px;
    width: 200px;
    margin: 10px;
    
}

.list{
    margin: 10px;
    background-color: black;
    height: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

}

 

 

작동은 너무 잘되지만 appendChild 에러가 뜬다! 

이건 나중에 차차 수정해보도록 하겠당