H5中的draggable

基本语法及事件

draggable 属性规定元素是否可拖动。必须设置，否则没有拖拽效果及事件触发

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作

语法 

值	描述
true	规定元素是可拖动的。
false	规定元素是不可拖动的。
auto	使用浏览器的默认特性。

在拖放过程中会触发以下事件：

在拖动目标上触发事件（源元素），作用于被拖拽元素上

• ondragstart - 开始拖动元素触发
• ondrag - 元素正在拖动时触发
• ondragend - 用户完成元素拖动后触发 

作用于目标元素

• ondragenter - 进入其容器范围内触发（当被鼠标拖动的源元素进入目标容器范围内时触发） 
• ondragover - 被拖动的源对象在目标容器中拖动时触发
• ondragleave - 拖动的对象离开目标容器时触发
• ondrop - 释放鼠标时触发

Event.preventDefault 

阻止默认事件，在ondragover中一定要执行preventDefault方法，否则ondrop不会被触发

DataTransfer

在进行拖放操作的时候，dataTransfer对象可以用来保存被拖动的数据。它可以保存一项或多项数据、一种或多数数据类型。通谷一点讲，就是可以通过它来传输被拖动的数据，以便在拖拽结束的时候，对数据进行其他的操作。

• setData(type, data): 用于声明所发送的数据
• getData(type)：用于获取指定type的数据 注意：只能在ondrop中获取的到
• clearData(type)：用于清除指定类型的数据

在其它的事件(如ondragover、ondragleave等），是无法获取dataTransfer里面的值了。这是由于W3C要求对dataTransfer里的值进行保护[参考]。因此，如果需要在这些事件里获取数据，只能通过一个全局变量等其它方式来实现了。

event.dataTransfer.setDragImage(p_w_picpath, x, y)

setDragImage方法用于在拖放操作过程中，修改鼠标指针所指向的图像

示例一： 

先看效果： 

先说一下，这种和鼠标去拖拽某个元素跟着鼠标移动一直移动不一样的，那种核心用到三个鼠标事件是 onmousedown、onmousemove、onmouseup。咱们这种是拖拽、就是本身是不动的状态 

 

下面是完整代码： 

示例二： 

 

完整代码： 

  
  
  


  

    

      
将文件拖到此处进行上传