Vue 百度首页我的关注里拖动div是怎么实现的？

Question

这个是百度首页的我的关注里面的功能，不知道是怎么做的，请教大神们。

现在点击右侧一个div，拖动到左面

从右侧拖动，会有一个虚线框，然后拖动的div改变了css样式

当拖到中间偏左的时候，左侧也会显示虚线框，当放手的时候，拖动的div会停靠在左侧。
如果拖到中间偏右的话，当放手的时候，拖动的div会停靠在右侧。

【如果我描述的不够详细，各位可以打开百度首页，在登录百度账号之后可以查看】
这个复杂的过程，请问各位大神们，是怎么实现的?

Answer 1

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