這和vue這種mvvm框架沒什么本質關聯(lián)，就是在瀏覽器提供的原生拖拽事件上，增加一些視圖層邏輯，這部分邏輯應該是你想知道的東西吧？

首先簡單講你看到的元素其實是什么：

• 虛框其實就是一個占位元素，一般叫做placeholder，它可能就是一個div，然后加一個虛框的樣式，僅此而已
• 你拖拽的那個是一個鏡像元素，一般叫做mirror，它可能也是一個div或者別的什么的，然后加一個拖拽效果的樣式

首先先將這兩個元素放到頁面上，同時把它們隱藏。

之后就要利用瀏覽器的拖拽事件（drag, dragStart, dragOver之類的，這個詳細的去MDN上查）來抽象拖拽過程，以從右往左舉例：

• 在右側拖拽事件開始時，隱藏你要拖的那個元素，同時顯示mirror
• 之后拖拽的過程，會響應鼠標移動的事件，動態(tài)的移動mirror的位置
• 之后懸浮到左邊的容器元素上了，會響應dragOver事件，這時候顯示左框中的placeholder
• 之后拖拽完成時，會觸發(fā)drop相關的事件，隱藏mirror和placeholder，同時將真正的右側元素移動到左邊

我這個描述是偏向dom層的，你用vue來做，可以把移動元素的邏輯抽象到數(shù)據(jù)層來完成。

不過話說回來，這種拖拽其實是比較常用的交互，因此存在大量現(xiàn)成的工具庫，我給你推薦一個draggable。有興趣可以看看這些庫的源碼，基本和上面我所描述的差不多，唯一的區(qū)別在于，實現(xiàn)拖拽過程的事件可能不是利用drag/drop這類的，而是利用mouseup/mouseover/mousedown等鼠標事件模擬的，但是大同小異。

同時關于拖拽的整個過程是一個event-driven的業(yè)務場景，因此使用一些響應式的輔助手段會更好，比如rxjs，同時處理多個異步事件，我會經(jīng)常把自己寫懵逼。