详解Html5原生拖拽操作
|
最近的一次项目开拓顶用到了H5的拖拽成果，因为现有项目行使的是VUE百口桶，行使了vuedragable这个插件，可是整个进程是较量疾苦的。遂抉择从H5拖拽的道理开始研究，然后再将其应用到数据驱动的框架中。在H5中要想实现拖放操纵，至少必要颠末两个步调：1) 将想要拖放的工具元素的draggable属性设为true（img与a元素默认应承拖放）；2) 编写与拖放相干的变乱处理赏罚代码。为了测试轻盈，我这里起首行使jQuery库完成拖拽的根基成果。 1. 拖拽进程 1.1 拖动变乱 当按住鼠标拖动draggable元素的时辰会凭证如下次序依次触发 dragstart -> drag -> dragend dragstart ：在按住鼠标开始拖动时辰触发（触发一次） drag ：在按住鼠标拖动的进程触发（一连触发） dragend ：在开释鼠标后触发（无论拭浇楠素放到了有用的安排方针，照旧安排到了无效的安排方针上） 1.2 安排变乱 当将draggable元素元素拖动到容器中将会凭证如下次序依次触发 dragenter -> dragover -> drop dragenter:只要有元素被拖动到安排方针上，就会触发dragenter变乱 1.3 完备变乱流 从开始拖动元素到安排元素到方针地区，将会凭证如下次序依次触发 dragstart->drag->dragenter->dragover->dragleave->drop->dragend 2. 办理firefox对拖拽不支持的题目 假如我们直接给一个元素添加draggable属性，在chrome，opera中是可以直接举办拖拽（没有可以开释的操纵（好比箭头变+号）），可是在firefox却没有回响 <ul class="canDrog"> <li draggable="true" id="1">优</li> <li draggable="true" id="2">良</li> <li draggable="true" id="3">中</li> <li draggable="true" id="4">差</li> </ul> <script> //没有任何JS代码 </script> 要办理这个题目必需为拖拽元素绑定dragstart变乱处理赏罚函数，而且在该函数中挪用event.dataTransfer.setData函数 <script> <ul class="canDrog"> <li draggable="true" id="1">优</li> <li draggable="true" id="2">良</li> <li draggable="true" id="3">中</li> <li draggable="true" id="4">差</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox 必需会见用于拖拽通讯的dataTransfer工具 event.dataTransfer.setData("Text",'1'); }); </script> 3. 办理chrome，opera拖拽元素至容器中时没有表现可开释标识题目 可开释标识行使差异的操纵体系也许差异，在mac chrome中呈现的是一个圆形标识内里嵌入一个白色的'+'。 办理方案是为容器绑定dragover变乱 <ul class="canDrog"> <li draggable="true" id="1">优</li> <li draggable="true" id="2">良</li> <li draggable="true" id="3">中</li> <li draggable="true" id="4">差</li> </ul> <table class="dataTbl"> <thead> <tr> <th style="width: 10%">节次/礼拜</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> </thead> <tbody> <tr> <td>第一节</td> <td draggable="true" ></td> <td draggable="true" ></td> <td draggable="true" ></td> <td draggable="true" ></td> <td draggable="true" ></td> </tr> <!--此处省略--> </tbody> </table> <script> $('.canDrog > li').bind('dragstart',function(event){ //firefox 必需会见用于拖拽通讯的dataTransfer工具 event.dataTransfer.setData("Text",'1'); }); //google chrome,opera必要添加 $(".dataTbl").bind("dragover",'td',function(e){ e.originalEvent.preventDefault(); }) </script> 4. 办理安排时firefox打开新选项卡题目 行使firefox的时辰假如开释了被拖拽的元素，默认赏识器将会打开一个新的选项卡,如下
这是因为drop回调函数之后赏识器执行了默认举动，凡是的办理方案在拖拽容器的drop钩子中添加阻止默认变乱执行以及阻止冒泡的代码。 <script> //将元素开释到当前元素中 $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault(); event.stopPropagation(); }); </script> 可是假如将draggable元素拖到其他处所，依然会导致打开新选项卡题目的呈现，这时可觉得全部容器添加如上代码。
5. 编写一个完备小例子
源码: https://github.com/pluslicy/drag 随后将对vuedraggable插件库举办进修，应用在vue框架中 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
