本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。

如果您只需要解决问题，请阅读第一、二部分即可。

如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

1、需求分析

实现一个CMS内容管理系统，在后台进行内容编辑，在官网更新展示内容。

关于后台的编辑功能，大致分为两部分：组件拖拽预览、组件内容编辑实时预览。

对于组件拖拽预览，用户可以在含有各种功能组件的列表中，选择需要的组件进行拖拽。将组件拖拽到预览画布中后，可以在画布中预览组件的内容。

对于组件内容编辑实时预览，用户可以点击编辑按钮，显示对应组件的内容编辑信息。当修改组件内容时，在画布中可以实时预览组件的变化。

2、实现步骤

（1）关于拖拽组件库的选择

关于拖拽组件库，在github上有很多，最热门的当属vuedraggable这个库。

它基于Sortable.js，拥有完整的中文文档，所以很多朋友在做拖拽功能时，都会优先考虑它。

但是，我在使用的过程中，在组件拖拽、取消组件拖拽这里，遇到了一些小问题。不知道是我操作的问题，还是库本身存在BUG，所以最终没有选用它。

于是我发现了，一个更加好用的拖拽库vue-draggable-next。

它的出现是参考了vuedraggable这个库，所以说很多用法很相似，但是使用起来较之更加友善。总结为一个词，自由。

下面我们的拖拽功能实现，就是利用了vue-draggable-next这个库。

如果你对拖拽底层原理感兴趣，并且有空余时间，劳请阅至第三部分拖拽原理总结。

（2）拖拽功能代码实例

模版和逻辑中代码都分为了三部分：组件列表、预览画布、内容编辑。

布局时，样式根据需求自定义，此处只是提供了功能的基本逻辑实现。

使用时，关于拖拽组件的需求，根据文档中提供的属性和事件的描述，灵活配置完善。

vue-draggable-next库文档地址：https://github.com/anish2690/vue-draggable-next。

安装依赖：

npm install vue-draggable-next
//or
yarn add vue-draggable-next