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

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

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

html：

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

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

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;
}

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

最后，我們需要通過js監(jiān)聽draggable和droppable的相關(guān)的事件。

js：

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

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

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

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

// 監(jiān)聽droppable的相關(guān)事件
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);
}

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

好了，demo比較簡單，但是細(xì)節(jié)還是有一些的，自己實(shí)踐一下才能更深刻的領(lǐng)悟。

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