建网站服务商/产品软文模板

这和vue这种mvvm框架没什么本质关联，就是在浏览器提供的原生拖拽事件上，增加一些视图层逻辑，这部分逻辑应该是你想知道的东西吧？

首先简单讲你看到的元素其实是什么：

虚框其实就是一个占位元素，一般叫做placeholder，它可能就是一个div，然后加一个虚框的样式，仅此而已

你拖拽的那个是一个镜像元素，一般叫做mirror，它可能也是一个div或者别的什么的，然后加一个拖拽效果的样式

首先先将这两个元素放到页面上，同时把它们隐藏。

之后就要利用浏览器的拖拽事件(drag, dragStart, dragOver之类的，这个详细的去MDN上查)来抽象拖拽过程，以从右往左举例：

在右侧拖拽事件开始时，隐藏你要拖的那个元素，同时显示mirror

之后拖拽的过程，会响应鼠标移动的事件，动态的移动mirror的位置

之后悬浮到左边的容器元素上了，会响应dragOver事件，这时候显示左框中的placeholder

之后拖拽完成时，会触发drop相关的事件，隐藏mirror和placeholder，同时将真正的右侧元素移动到左边

我这个描述是偏向dom层的，你用vue来做，可以把移动元素的逻辑抽象到数据层来完成。

不过话说回来，这种拖拽其实是比较常用的交互，因此存在大量现成的工具库，我给你推荐一个draggable。有兴趣可以看看这些库的源码，基本和上面我所描述的差不多，唯一的区别在于，实现拖拽过程的事件可能不是利用drag/drop这类的，而是利用mouseup/mouseover/mousedown等鼠标事件模拟的，但是大同小异。

同时关于拖拽的整个过程是一个event-driven的业务场景，因此使用一些响应式的辅助手段会更好，比如rxjs，同时处理多个异步事件，我会经常把自己写懵逼。