大家好，我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简demo。

实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。属性值如下所示：

当我们在元素元素标签中添加 draggable 属性时，该元素就可以进行拖动操作了。

元素可以进行拖动了，我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了，拖动事件主要分为两个类别，一类是拖动元素可以触发的：

另一类是，是当拖拽元素到某个目标元素时，目标元素会触发的：

在拖动事件中，我们会获取到拖动的事件对象 (e)，在拖动对象中我们能获取到一个重要的属性 dataTransfer ，我们可以通过 dataTransfer 的 dropEffect 属性控制被拖动的元素的放置行为，其值的说明如下所示。

下面我们根据以上的知识点来实现一下页面设计器组件拖动的最简demo。首先我们定义一下组件列表和画布区域

并将组件列表和画布中的页面分别通过list1，和list进行遍历渲染。

下面我们来分析一下如何实现将组件列表中的组件拖动到画布中，上文中我们讲到，拖动的元素以及目标元素可以设置一系列的事件，那么我们就可以在组件列表渲染时，为每个组件设置一下 dragstart 事件，在该事件中我们需要做如下处理：

然后在dragend事件中取听以上动作。

下面我们通过代码的方式来实现以上过程。首先在组件列表进行遍历时，添加组件的dragstart 和dragend事件。

下面是这两个事件的实现。

这样，我们组件列表中的组件就可以拖动到画布中了

那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢？同样，我们可以将画布中的组件添加mousedown事件，在事件中我们添加mousemove事件的监听，当画布中的组件进行移动时，我们实时的将该被移动元素所对应的元数据坐标进行更新。下面是代码的实现。

这样画布中的组件也就支持移动啦。

这篇文章中我们实现了页面设计器组件自由布局的最简demo，让大家理解自由拖动的实现原理。至于里面还有一些细节的处理，大家可以根据自己的需要自行实现~对该系列文章感兴趣的小伙伴来一波关注吧。我们会持续与大家分享与交流。

最后我们上一下完整demo代码。