js

//드롭할 객체 fill , 빈 박스들 emties
const fill = document.querySelector( ? );
const empties = document.querySelectorAll( ? );

// 드래그 할 객체에 dragstart 시작 dragend 끝 이벤트
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);

// 드래그 해서 들어가는 빈 객체들에 모두 드래그 이벤트 설정
for (const empty of empties) {
  empty.addEventListener('dragover', dragOver); //드롭허용
  empty.addEventListener('dragenter', dragEnter); //반쯤 들어왔을때
  empty.addEventListener('dragleave', dragLeave); //반이상 빠져나갈때
  empty.addEventListener('drop', dragDrop); //완전히 드롭했을때
}

function dragStart() {
  //드래그 시작시
  this.className += ' hold'; //회색 테두리
  setTimeout(() => (this.className = ''), 0); //이전이미지가 남아있지 않도록
}

function dragEnd() {
  //드래그 끝날시
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault(); // 드롭을 허용하도록 prevetDefault() 호출
}

function dragEnter(e) {
  this.className += ' hovered'; // 드롭 대상이 들어왔을때 배경색을 검고 테두리 점선
}

function dragLeave() {
  this.className = 'empty'; // 드롭 대상이 나갔을때
}

function dragDrop() {
  this.className = 'empty'; //위의 hovered 클래스를 삭제하고 empty 클래스 입력
  this.append(fill);
}

참고
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
https://developer.mozilla.org/ko/docs/Web/API/Document/drag_event
https://ko.javascript.info/mouse-drag-and-drop