自定义拖拽店铺布局，从左侧拖拽组件到中间展示区域放下，展示区域生成组件，鼠标点击选中组件，右侧展示可配置区域，可对组件进行按钮操作上下移动和删除
具体实现拖拽功能方案：
-
JQ实现
-
VUE实现
一、JQ实现
效果：
引入相关文件：
HTML:
JS:
二、VUE实现
布局：
使用antdv中的layout进行布局（页面基础样式）
VUEX:
Modular是左侧需要拖拽的模块,DisplayArea是右侧展示和配置区域,下面分别讲解这2个组件:
Modular组件作用:
component 中的is如果不传不会展示该组件代码
一、mousedown中：
1、算出鼠标点击，相对元素的位置,这地方用的网上找的代码，移动时候没有移动点击的元素，只是移动虚影,有不懂的可以百度下 vue中拖拽
2、拖拽虚影—-重置并定位到按钮的中心位置
通过计算获取每个点击元素的位置，并且把虚影定位到点击的位置中，并阴影显示
3、获取vuex中所有数组中元素的高度,通过vuex获取现有展示区域中是否有数据，如果有数据会从新拼接数组,childOffsetTop 距离顶部高度，200是默认店招本身加上padding的告诉，有布局原因childOffsetHeight 组件自身高度
4、在每个组件中创建展示区阴影，如果vuex中没有数组就默认push阴影，更新vuex中数据
在点击事件中创建默认阴影方式重复触发componentName 阴影组件名字，如果为空vue中的component中is不会展示该组件isShowComp 是否展示阴影
5、获取了滚动高度
6、更新vuex中数据
7、获取展示区域距离左侧的距离
二、onmousemove移动中:
1、e.preventDefault() 阻止默认动作，如果不阻止拖拽移动时候会卡住
2、控制拖拽阴影在移动期间宽、高增加，缩小和透明度
3、获取拖拽阴影是否进入到了展示区域，如果进入了就展示阴影
4、核心，通过拖拽阴影+滚动高度，确定拖拽在哪个组件中，通过判断来显示该展示哪个阴影，通过修改componentName来展示,这地方可以支持鼠标在拖拽模式时候上线却换展示区域阴影
5、是否展示阴影
6、反选下标（demo中没有完善）
当在展示区域选中组件时，默认会在组件上包含一个虚影边框，告诉用户选中了哪一个。从左侧拖拽组件到选中展示组件之上时index会发生变化，如果放下组件会默认选中刚放下这个组件，但是配置区域的功能没有更新
三、onmouseup鼠标离开时：
1、删除数组中所有的阴影
2、是否在展示区域离开，如果是就创造组件并更新vuex中的数组（demo中包含业务逻辑）
如果是在展示区域中松开才会执行插入组件，如果不是就不走这
3、重置样式
DisplayArea组件作用
一、展示区域
原文始发于微信公众号（Front小思）：不同方式实现自定义拖拽店铺布局功能
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/40748.html
