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

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

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

html：

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

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

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. 圖片來(lái)源于https://source.unsplash.com/的隨機(jī)圖片；2. .dragging為draggable元素正在被拖動(dòng)的狀態(tài)，增加黃色border；3. .drag-over為draggable元素被拖動(dòng)到容器上方時(shí)容器的狀態(tài)，增加灰色虛線(xiàn)border。

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

js：

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

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

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

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