Html5原生拖拽操作

最近在一个项目开发中使用了H5的拖拽功能。由于现有项目使用的是VUE全家桶，所以使用了vuedragable插件，但是整个过程还是比较蛋疼的。于是决定从H5拖拽原理开始研究，然后应用到数据驱动框架中。要在H5中实现拖拽，至少需要两步：1）将要拖拽的object元素的draggable属性设置为true（img和a元素默认允许拖拽）；2)编写与拖放相关的事件处理代码。为了测试方便，我先用jQuery库来完成拖拽的基本功能。1.拖动过程1.1Drag事件当按下鼠标拖动可拖动元素时，会按以下顺序触发dragstart->drag->dragenddragstart是在按住鼠标开始拖动时触发（触发一次）dragis按住鼠标拖动过程被触发（连续触发）dragend在鼠标松开后被触发（无论元素放置在有效的放置目标上还是放置在无效的放置目标上）1.2Drop事件当可拖动元素被拖入时容器中，dragenter->dragover->dropdraenter将按以下顺序触发。只要有一个元素被拖动到放置目标上，就会触发dragenter事件。dragoverdragenter之后是dragover事件，被拖动的元素仍然被放置只要目标在范围内移动，这个事件就会一直触发。dragleave元素被拖出放置目标，会触发dragleavedrop。当被拖动的元素放在目标元素上时，就会被触发。1.3完整的事件流程从开始拖动元素到元素放置到目标区域，dragstart会按以下顺序依次触发->drag->draenter->dragover->dragleave->drop->dragend2。解决firefox不支持拖动的问题。如果我们直接给一个元素加上draggable属性，在chrome和opera中可以直接拖动（没有可以释放的操作（比如箭头变成+号），但是在firefox中没有反应优秀好mediumbad要解决这个问题，必须绑定dragstart拖拽元素的事件处理函数，并在该函数中调用event.dataTransfer.setData函数$('.canDrog>li').bind('dragstart',function(event){//firefox必须访问dataTransfer对象进行拖拽通信event.dataTransfer.setData("Text",'1');});//googlechrome,opera需要添加$(".dataTbl").bind("dragover",'td',function(e){e.originalEvent.preventDefault();})4.解决使用firefox时firefox打开新标签页的问题。如果在使用firefox时松开拖动的元素，默认浏览器会打开一个新的标签页。这是因为浏览器在drop回调函数后执行了默认行为，通常的解决方法是在拖动容器的drop钩子中添加防止默认事件执行和冒泡的代码但是如果将可拖动元素拖到其他地方，还是会导致打开新标签页的问题。这时候可以为所有的容器添加上面的代码。5.写一个完整的小例子源码：https://github.com/pluslicy/d...然后你将学习vuedraggable插件库，并在vue框架中应用