本文共 1781 字，大约阅读时间需要 5 分钟。

一：基础知识

传统的拖放式根据鼠标按下松开事件完成的    HTML5对于拖放只需要在元素上面设置draggable="true"属性,移动端不支持    
   
    拖放事件：        dragstart  当一个元素开始被拖拽的时候触发        drag  这个事件在拖拽源触发        dragend  拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否        dragenter  当拖拽中的鼠标第一次进入一个元素时触发        dragover  当拖拽中的鼠标移动经过一个元素时触发        dragleave  当拖拽中的鼠标离开元素时触发        drop  这个事件在拖拽操作结束释放时于释放元素上触发    注：在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove是不会触发的。

以下是基础代码演示：

不入框，则只触发拖事件

二：拖动分类案例：

一般在一个元素开始被拖拽的时候，触发dragstart时候设置与这次拖拽相关的信息，例如拖动的数据和图像        所有的拖拽事件都有一个属性————dataTransfer，它包含着拖拽数据        dataTransfer 的api文档：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer        dataTransfer基础语法：            dataTransfer的常用方法：                data：保存在拖拽元素中的数据                setData(format,data):设置拖拽元素的信息                setDragImage(element, x, y): 使用存在的图像元素作为拖动图像                format：和setData里的format遥相呼应，才能取到相应的值，系统默认格式为： text/plain、text/html、text/xml、text/url-list（也可以自定义format，把format-data当key-value键值对使用）                getData(format)：获取拖拽元素的信息                addData(element): 调用此函数需要提供一个页面元素作为参考，同时使用此参数作为拖放反馈图像                clearData()：清除拖拽信息            dataTransfer的常用属性：                effectAllowed：设置拖拽时应带有的样式类型                dropEffect：设置拖拽元素被放下时的样式                files：内含一系列文件信息，常用于将文件从桌面拖向浏览器                items: 返回所有项与相关格式的所有文件

    
       
       
               
   
        
    
     1
    
        
    
     2
    
        
    
     3
    
        
    
     4
    
        
    
     5
    
        
    
     6
    
    
   
    
   
        
    
        
    
    
   
    

三：给歌单拖动排序

    
       
       
               
   
        
    
美丽之物
        
    
Coming Home
        
    
secret base
        
    
芒种
        
    
Bloom of Youth
        
    
骑在银龙的背上
    
   
    

转载地址：http://mvnqi.baihongyu.com/