摘要：接下來我們就用原生和快速實現這樣的拖放效果的內容很簡單，就是五個空的容器和一個可以被拖拽的元素注意點容器的的為，用于接收被拖拽的元素，可被拖拽的元素為，同時設置屬性為，表示該元素可以被拖拽。

拖放是很常見的一種交互效果，很多時候我們都會借助于第三方的控件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果：

HTML的內容很簡單，就是五個空的容器和一個可以被拖拽的元素：

html：

注意點：1. 容器的的class為droppable，用于接收被拖拽的元素，可被拖拽的元素class為draggable，同時設置draggable屬性為true，表示該元素可以被拖拽。2. 默認情況下，只有圖片、鏈接還有被選中的文字能被拖拽，其他元素需要設置draggable為true才能被拖拽。所以為了凸顯draggable的用法，這里使用
而不是來作為被拖拽的元素。

在實現樣式的時候，除了實現靜態的樣式，一些過渡狀態也需要增加樣式以提升視覺體驗：1. 元素被拖動的過程中增加邊框等效果；2. 當元素被拖動到容器上方時，容器也應增加樣式表明容器可以接收一個被拖拽的元素。

css：

body {
  background-color: darksalmon;
}

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

.droppable {
  display: inline-block;
  height: 160px;
  width: 160px;
  margin: 10px;
  border: 3px salmon solid;
  background-color: white;
}

.dragging {
  border: 4px yellow solid;
}

.drag-over {
  background-color: #f4f4f4;
  border-style: dashed;
}

.invisible {
  display: none;
}

注意點：1. 圖片來源于https://source.unsplash.com/的隨機圖片；2. .dragging為draggable元素正在被拖動的狀態，增加黃色border；3. .drag-over為draggable元素被拖動到容器上方時容器的狀態，增加灰色虛線border。

最后，我們需要通過js監聽draggable和droppable的相關的事件。

js：

// 查詢draggable和droppable
const draggable = document.querySelector(".draggable");
const droppables = document.querySelectorAll(".droppable");

// 監聽draggable的相關事件
draggable.addEventListener("dragstart", dragStart);
draggable.addEventListener("dragend", dragEnd);

function dragStart() {
  this.className += " dragging";
  setTimeout(() => {
    this.className = "invisible";
  }, 0);
}

function dragEnd() {
  this.className = "draggable";
}

// 監聽droppable的相關事件
for (const droppable of droppables) {
  droppable.addEventListener("dragover", dragOver);
  droppable.addEventListener("dragleave", dragLeave);
  droppable.addEventListener("dragenter", dragEnter);
  droppable.addEventListener("drop", dragDrop);
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += " drag-over";
}

function dragLeave(e) {
  this.className = "droppable";
}

function dragDrop(e) {
  this.className = "droppable";
  this.append(draggable);
}

注意點：1. 當draggable元素被拖動時，原來容器中的draggable元素并不會消失，需要我們手動將其隱藏（class設置為invisible），如果同步操作會立馬觸發dragend事件導致拖動效果消失，所以在setTimeout的回調中異步設置可確保拖動操作開始后再隱藏draggable元素；2. 在dragEnter和dragOver方法中我們需要通過preventDefault來取消事件以表明容器是一個合法的droppable元素，不然容器的drop事件將無法觸發，接下來的操作也將無法進行，詳細解釋請參考 MDN DropTarget；3. 在dragDrop方法中直接使用append方法將draggable元素移動至當前容器下面。

好了，demo比較簡單，但是細節還是有一些的，自己實踐一下才能更深刻的領悟。

完整示例：https://codepen.io/mudontire/...