IE9+使用drag拖动更爽

在没有drag事件的时候，做元素拖拽使用的都是mouse事件，但mouse在处理过程中可能有这样或那样的问题，主要还是感觉不流畅，如果小伙伴们不在考虑低版本IE(

下面来展示下drap的主要事件

在拖动目标上触发事件 (源元素):

• ondragstart - 用户开始拖动元素时触发

• ondrag - 元素正在拖动时触发

• ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

• ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

• ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

• ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

• ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

dataTransfer对象(了解就行了)：

• dropEffect 设置放下效果（copy move link none）

• effectAllowed 允许的效果 (copy move link copyLink copyMove linkMove all
  none uninitialized(默认值，等同于all))

• files FileList对象

• setDragImage()

• setData()

• getData()

• clearData()

演示效果

HTML:

    

        
标题一
        
标题二
        
标题三
        
标题四
        
标题五
    


    

        
    

JS:

在dragover和drop环节上阻止默认事件(e.preventDefault())是少不了的，，不信的少侠可以尝试一下，以来印证老夫所言非虚。。。哈哈哈，偏偏然，隐身山林中……

控制台打印

示例

完整代码

    
    
    
    


    
    
    

        

        
1天天向上1
        
2天天向上22
        
3天天向上333
        
4天天向上4444
        
5天天向上55555
        
6天天向上666666
        
7天天向上7777777
        
8天天向上88888888
        
9天天向上999999999
    

    

最后向大家推荐一个拖动插件 http://dragsort.codeplex.com/ 用过感觉还不错