这和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,同时处理多个异步事件,我会经常把自己写懵逼。