用处及优势
- 提供专门的拖拽与投放的API
- 出发多个事件，可控制鼠标的形状与移动是的效果
- 可以跨页面拖放
拖放API的基本操作语法
draggabel属性
拖拽事件-ondragstart , drag , dragend
拖放事件-dragenter , dragover , drop
dataTransfer对象- setData / getData / setDragImage
实现拖拽垃圾桶效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; } ul{ overflow: hidden; padding: 0; margin: 0; } li{ width: 100px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; /* margin: 20px; */ float: left; list-style: none; } #out{ width: 100px; height: 150px; line-height: 150px; margin: 50px; border: 1px solid #000; text-align: center; } </style> </head> <body style="position:relative"> <ul> <li draggable="true">白色垃圾</li> <li draggable="true">生活垃圾</li> <li draggable="true">厨余垃圾</li> <li draggable="true">有害垃圾</li> <li draggable="true">可回收垃圾</li> </ul> <p id="txt"></p> <div id="out">垃圾箱</div> </body> <script type="text/javascript"> window.onload=function(){ let ali=document.getElementsByTagName('li') let oDiv=document.getElementById("out") let txt=document.getElementById("txt") let targetLi=null //用来储存当前拖拽的dom元素 let img=document.createElement('img')//定义拖拽的图片 img.src='img/1111.jpg' //给没给拖拽元素赋方法 for(var i=0;i<ali.length;i++){ //开始 ali[i].ondragstart=function(ev){ this.style.background='yellow' targetLi=this ev.dataTransfer.setData('Text',this.innerHTML) //文本数据的携带 // ev.dataTransfer.setDragImage(img,20,20) } //结束 ali[i].ondragend=function(e){ this.style.background='' } } oDiv.ondragenter=function(){ this.style.borderColor='red' } oDiv.ondragover=function(e){ // console.log(e) e.preventDefault() } oDiv.ondragleave=function(e){ this.style.borderColor='#000' } oDiv.ondrop=function(ev){ this.style.borderColor='#000' let oText=ev.dataTransfer.getData('Text') txt.innerHTML='删除的是:'+ oText targetLi.parentNode.removeChild(targetLi) } } </script> </html>
实现拖动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ margin: 0; } ul{ overflow: hidden; padding: 0; margin: 0; } li{ width: 100px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; /* margin: 20px; */ float: left; list-style: none; } </style> </head> <body style="position:relative"> <ul> <li draggable="true">白色垃圾</li> <li draggable="true">生活垃圾</li> <li draggable="true">厨余垃圾</li> <li draggable="true">有害垃圾</li> <li draggable="true">可回收垃圾</li> </ul> </body> <script type="text/javascript"> window.onload=function(){ let ali=document.getElementsByTagName('li') let oDiv=document.getElementById("out") let txt=document.getElementById("txt") let targetLi=null //用来储存当前拖拽的dom元素 let img=document.createElement('img')//定义拖拽的图片 img.src='img/1111.jpg' let pageY=0 //start偏移量 let pageX=0 //给没给拖拽元素赋方法 for(var i=0;i<ali.length;i++){ //开始 ali[i].ondragstart=function(ev){ console.log(ev,1) pageY=ev.pageY pageX=ev.pageX this.style.background='yellow' targetLi=this ev.dataTransfer.setData('Text',this.innerHTML) //文本数据的携带 // ev.dataTransfer.setDragImage(img,20,20) } //结束 ali[i].ondragend=function(e){ this.style.position='absolute' let top=this.style.top?Number(this.style.top.replace('px','')):0 let left=this.style.left?Number(this.style.left.replace('px','')):0 this.style.top=top+e.pageY-pageY+'px' this.style.left=left+e.pageX-pageX+'px' this.style.background='' } } } </script> </html>