本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码，供大家参考，具体内容如下

步骤分析：

• 根据数据结构生成HTML结构
• 全选和单选功能的实现，以及当其为选中状态时它的父级的颜色变化的
• 点击删除，删除结构同时删除数据
• 给每一个li绑定mousedown，tip显示，并且定位在鼠标位置
• 鼠标移动时，tip跟随，取消默认行为
• 碰撞检测是否拖到“已删除”项
• 鼠标松开、删除结构和数据
  

过程实现

HTML代码

 

  

   
   |
   邮箱
  
  
  

  

 
 
  
   

    
写信
    
收信
    
通讯录
   
   

    
收件箱
    
星标邮件
    
群邮件
    
草稿箱
    
已发送
    
已删除清空
    
垃圾箱清空
 
  
  
   
    收件箱(共96封,其中未读邮件9封)
   
   
    删除
    彻底删除
    转发
    举报
    全部标为已读
    标记为...
    移动到...
   
   
    

     
     

    
    

     
    
   
  
 
 

选中2封邮件

JS代码

这里需要引入碰撞函数检测的封装函数和数据，但在实际的应用一般是通过ajax从后台获取数据，所以此处就不在写模拟的数据，只记录一下我的写作步骤。