[Vanilla JS] Drag & Drop 만들기

Drag & Drop

HTML draggable="true" 속성을 사용해서 드래그를 가능하도록 하고 정해진 div에서 이동이 가능하도록 만들어 보았다.

---

[ HTML ]

<div class="empty">
    <div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<br />
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>

 

[ CSS ] 

body {
  background-color: rgba(0, 0, 0, 0.3);
}

.fill {
  background-image: url("http://source.unsplash.com/random/100x100"); 
  position: relative;
  height: 100px;
  width: 100px;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.empty {
  display: inline-block;
  height: 110px;
  width: 110px;
  margin: 10px;
  border: 3px solid rgba(0, 0, 0, 0.4);
  background-color: white;
}

background-image는 unsplash 사이트에서 원하는 크기의 사진을 랜덤으로 불러온다.

 

[ JavaScript ]

const fill = document.querySelector(".fill");
const empties = document.querySelectorAll(".empty");

function dragOver(e){
    e.preventDefault(); // 드랍을 허용하도록 preventDefault() 호출
}
function dragDrop(){
    this.append(fill);
}

empties.forEach((empty)=>{
    empty.addEventListener('dragover', dragOver); 
    empty.addEventListener('drop', dragDrop);   
    
})

 

[ 결과 ]

See the Pen VanillaJs-Drag&Drop by 신성철 (@pugoxjbx-the-animator) on CodePen.

[ 참고 자료 ]

https://developer.mozilla.org/ko/docs/Web/API/Document/drag_event

drag - Web API | MDN