html5 拖拽及用 js 实现拖拽功能的示例代码

今天带来html5 拖拽及用 js 实现拖拽功能的示例代码教程详解

1. HTML5 拖拽

1.1 相关知识

拖拽元素：可以为元素添加 draggable="true"来让元素能够被拖拽。

拖拽元素的事件监听：（应用于拖拽元素）

• ondragstart当拖拽开始时调用
• ondragleave 当鼠标离开拖拽元素时调用
• ondragend 当拖拽结束时调用
• ondrag 整个拖拽过程都会调用

目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。

目标元素的事件监听：（应用于目标元素）

• ondragenter 当拖拽元素进入时调用
• ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
• ondrop 当在目标元素上松开鼠标时调用
• ondragleave 当鼠标离开目标元素时调用

如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。

1.2 拖拽基础

    
        
  
        
  
        Document
        
    
    
        
  
        
  
        
    

1.3 将 A 在 B、C 之间拖拽

    
        
  
        
  
        Document
        
    
    
        
boxB
        
  
            
   
    1
   
            
   
    2
   
            
   
    3
   
            
   
    4
   
            
   
    5
   
        
  
        
boxC
        
  
        
    

效果展示

2. 用 js 实现拖拽

2.1 js 简单拖拽

按下鼠标进行简单的拖拽。

    
        
  
        
  
        Document
        
        
    
    
        
  
    

效果展示

2.2 带效果的拖拽

    
        
  
        
  
        Document
        
        
    
    
        
  
        
  
            
   
请选择拖拽的方式
            
   
            
   1
            
   
            
   2
        
  
    

效果展示

有时会卡顿，未解决…

到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索自学php网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持自学php网！

以上就是关于html5 拖拽及用 js 实现拖拽功能的示例代码全部内容,感谢大家支持自学php网。