1.源元素事件(要拖拽的文件)
dragStart - 当鼠标开始拖放时被触发
drag - 当鼠标拖放过程中被触发
dragend 当鼠标拖放结束时被触发
2.目标元素事件(要拖拽到哪里去)
dragover - 当鼠标到达目标元素被触发，会反复触发
dragenter - 当鼠标拖放进入到目标元素内触发
drop - 当鼠标实现拖放效果时被触发
HTML页面默认不允许拖放，称之为HTML页面的默认行为
解决：在dragover的事件中组织默认行为即可event.preventDefault();
3.dataTransfer对象(类似于window系统的剪切板功能)
获取到dataTransfer对象
var trans = event.dataTransfer;-
设置数据
setData(type,data) type:类型，特指标识(id)，一般为字符串 data:设置的数据内容 获取数据
getData(type);清除数据
clearData(type)
所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除
代码示例：-
从本地拖拽文件到页面中
<!doctypehtml> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现从本地拖放图片到页面中</title> <style> div { width : 500px; height: 500px; border: 1px solid black; padding: 10px; } </style> </head> <body> <!-- TODO 目标元素 --> <div id="d1"></div> <script> var d1 = document.getElementById("d1"); d1.ondragover = function(event){ event.preventDefault(); } d1.ondrop = function(event){ var dataTrans = event.dataTransfer; //获取到从本地拖拽进来的文件 var files = dataTrans.files[0]; //创建文件读取对象 var reader = new FileReader(); //读取指定文件 reader.readAsDataURL(files); //读取完以后，显示图片 reader.onload = function(){ d1.innerHTML = "<img src="+reader.result+">"; } //取消默认事件 event.preventDefault(); } </script> </body> </html> -
实现左右拖拽
<!doctypehtml> <html> <head> <title></title> <script type="text/javascript"> </script> <style type="text/css"> #d1{ width: 300px; height: 400px; border:1px solid black; float: left; } #d2{ width: 300px; height: 400px; border:1px solid black; float: right; } </style> </head> <body> <div id="d1"> <img id= "myImage" src="class.jpg"/> </div> <div id="d2"></div> </body> <script type="text/javascript"> var myImage = document.getElementById("myImage"); var d1 = document.getElementById("d1"); var d2 = document.getElementById("d2"); //在源元素的开始拖拽事件中获取到图片的src myImage.ondragstart = function(evevt){ //获取到DataTransfer对象 event.dataTransfer.setData("Text",myImage.src); } //目标元素的ondrop事件中，将要拖拽的信息放到目标元素中 d1.ondrop = function(event){ var ImgSrc = event.dataTransfer.getData("Text"); d1.innerHTML = "<img src = "+ImgSrc+">"; //离开目标元素后，将目标元素移除 d2.ondragend = function(){ d2.innerHTML = ""; } } //组织页面的默认行为，默认是不允许拖放的，必须在ondragover里面组织 d1.ondragover = function(event){ event.preventDefault(); } d2.ondrop = function(event){ var ImgSrc = event.dataTransfer.getData("Text"); d2.innerHTML = "<img src="+ImgSrc+">"; d1.ondragend = function(){ d1.innerHTML = ""; } } d2.ondragover = function(event){ event.preventDefault(); } </script> </html>
