媒介：前段时候担任公司的运营治理背景项目，经由过程运营背景的PC端拖拽设置规划，到达App首页模板的动态UI界面设置，天生页面。趁着周末，整顿一下当时所相识到的拖拽。文章会依据人人的反应或许本身进修履历的积累生长不定期更新雄厚。假如你想相识更多PC端的拖拽开辟，迎接点赞关注或许珍藏一波[鞠躬]。
之前在掘金一篇文章里看到这段话:
UI 开辟的三种形式
1.手写标签和款式代码，天生页面
2.可视化拖拽 UI 组建，天生页面
3.直接输入设想稿，输出可用页面
有幸当前公司处于UI开辟的第二阶段
当时开辟参考过的小部分网站，别的参考过的大批网站因为电脑硬盘涌现毛病丧失了没法恢复。
以上网站这些不是很重要，真正重要有效的网站链接我已帮你挑选整顿出来了，并贴在下面的文章内里(分为演示与教程两类)，点击相干链接即可进入相干开辟进修。
贴上面网站的原因是我想通知人人，插件选型之前一定要先整顿好本身的需求，依据需求在网上寻觅插件，而且翻开控制台，看看结果是否是你所须要的范例，不然下载到当地后调试了半天发明末了不能到达本身想要的结果，如许既糟蹋时候又糟蹋精神，就得不偿失了。所以，我以后有时候会整顿一套插件选型挑选的头脑导图出来，到时发到掘金或许个人民众号，人人一同分享提高。
好了，言归正传，我们最先上主菜：
拖拽水平的条理
就我搜刮到的材料来看，拖拽的水平是分为三类的，假如你有晓得的别的范例，迎接与我交换分享。
1.视图上的拖拽
比方这个：
经由过程定位来转变递次，注重看控制台的节点位置，并没有发作对应的转变。这类拖拽仅仅是视图交互上的结果，也是最最简朴水平结果的拖拽。
链接：
2.视图与节点同步变化的拖拽
2-1 JQ-UI
比方这个：
请注重看控制台的节点位置，发作了对应的转变。这类拖拽是能到达视图与节点的同步变化的结果。
链接：
2-2 H5-draggable
比方这个：
h5供应的draggable属性，请注重看控制台的节点位置，也发作了对应的转变。
链接：
2-3 JQ-UI与H5-draggable的弃取题目
JQ-UI和H5-draggable属性都能到达我们想要的结果，那我们应当挑选哪一个呢？个人而言，末了照样挑选了JQ-UI(固然重构我们改用了vue)。重要斟酌的处所是灵活性，JQ-UI优于H5-draggable属性的处所恰是在于灵活性。draggable属性内里要领封装的比JQ-UI相对而言比较牢固，不好调解。所以，以我的履历来看，假如你是简简简朴的小需求的拖拽，draggable的属性相对能够满足你；但假如你的拖拽需求比较复杂，那末我发起你用JQ-UI会比较好点。
3.数据，视图，节点的三者同步变化
比方：这个
vue插件Vue-Draggable，也是vue相干拖拽插件中的star最多的，设置项也最雄厚的。
链接:
教程：github-vue-Sortable(draggable插件是基于sortabl二次封装的，多看看这篇对运用draggable会有很大的协助)
项目实践
重构的时刻我们是用vue的，挑选了这个draggable插件，背面事实证明也是准确的。”花了比用JQ至极少一半的时候就到达了雷同的结果”。毕竟Vue只须要斟酌数据关注业务流程而不须要斟酌节点的操纵题目，这点照样异常不错的。横竖谁用谁晓得[吐舌]。好了，我们贴出代码申明：
// 引入组件
import draggable from 'vuedraggable'
// 拖拽模块箱子到 => 可整顿的箱子/ 渣滓箱子
<!--可整顿的箱子-->
<div id="sortable" class='block'>
<draggable
class="sortable"
v-model="templateJson.child"
// 设置吸收的拖拽
:options="{group:'people'}"
@remove="stop">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in templateJson.child"
:key="$index">
</module-template>
</draggable>
</div>
<!--渣滓箱子-->
<div id="dusbtin">
<br/>垃<br/>圾<br/>箱
<draggable
v-model="templateJson.child"
:options="{group:'people'}">
<div class="btn"></div>
</draggable>
</div>
<!--模块箱子-->
<div id="module">
<draggable
class="dragArea"
v-model="moduleJson.child"
:clone="clone"
// 最先拖拽的箱子的options选项设置
:options="{group:{ name:'people', pull:'clone', put:false },sort:false}"
@end="onEnd">
<module-template
:item="item"
:type="templateData.type"
v-for="(item, $index) in moduleJson.child"
:key="$index">
</module-template>
</draggable>
</div>clone是指复制，sort：false是指不运用排序。代码中相干options属性的设置申明你能够参考教程中的申明去对应相识。我这里就不再反复赘述了。
一句话总结
假如是简朴的拖拽，发起用H5的draggable属性。
假如是复杂点的拖拽，发起用JQ-UI完成。
假如是数据驱动，用Vue-Draggable插件是很不错的挑选。
一同交换?
假如你有别的更好的主意想一同交换，请定阅微信民众号yhzg_gz(点击复制，在微信中增加民众号粘贴即可)与我联络，寻求代码质量，高效率编程是我们配合的目的。
that’s all, 以上就是我现在一切的关于PC端项目拖拽履历的总结。以为对你开辟有协助的能够点赞珍藏一波，假如我那里写错了，愿望能指点出来。假如你有更好的主意或许发起，能够提出来与我交换。人人一同提高，配合生长。再次谢谢[鞠躬]。
