下面这个例子的效果就是鼠标点击元素后，元素跟着鼠标移动
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { padding: 0; margin: 0; } #one { width: 100px; height: 100px; background-color: red; position: absolute; } </style> </head> <body> <div id="one"></div> <script type="text/javascript"> window.onload = function () { var one = document.getElementById(‘one‘); // mousedown鼠标事件：当用户点击鼠标在元素上就会触发该事件 one.addEventListener(‘mousedown‘, function () { // mousemove 鼠标事件：当鼠标指针在元素上移动就会触发此事件 /** * e：指事件，在火狐浏览器中事件用window.event,所以只有把 event * 所以只有把event传给函数使用。为了兼容火狐和浏览器，一般会在函数里自动 * 重新赋值: e = e || window.event; */ document.addEventListener(‘mousemove‘, function (e) { one.style.left = e.clientX + ‘px‘; one.style.top = e.clientY + ‘px‘; }); }); } </script> </body> </html>
以上3个事件的控制对象为被拖拽的元素 （整个过程我们可以称之为拖拽区）
以上4个事件的控制对象为被拖追元素的目的容器（整个过程我们可以称之为投放区）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { padding: 0; margin: 0; } #one { width: 200px; height: 200px; border: 1px solid rebeccapurple; } #two { width: 100px; height: 100px; background-color: red; cursor: pointer; } </style> </head> <body> <div id="one"></div><br> <!-- draggable属性：设置改元素是否能够被拖拽 --> <div id="two" draggable="true"></div> <script type="text/javascript"> window.onload = function () { function $(id) { return document.getElementById(id); } // 鼠标拖拽事件(注意控制对象为被拖拽的元素) // dragstart: 用户开始拖拽时触发 $(‘two‘).addEventListener(‘dragstart‘, function (e) { // $(‘one‘).innerHTML = ‘开始拖拽‘; }); // drag: 用户正在拖拽时触发 $(‘two‘).addEventListener(‘drag‘, function (e) { // $(‘one‘).innerHTML = ‘移动当中‘; }); // dragend:用户结束拖拽时触发 $(‘two‘).addEventListener(‘dragend‘, function (e) { // $(‘one‘).innerHTML = ‘移动结束‘; }); // 投放过程事件(注意控制对象为拖拽元素的目的地元素) // dragenter: 当被拖拽的元素对象进入其范围内时触发 $(‘one‘).addEventListener(‘dragenter‘, function (e) { // $(‘one‘).innerHTML = ‘进入‘; e.preventDefault(); // 阻止默认事件 }); // dragover: 当被拖拽的元素对象在该容器范围内拖拽时触发 $(‘one‘).addEventListener(‘dragover‘, function (e) { // $(‘one‘).innerHTML += ‘我就在里面‘; e.preventDefault(); // 阻止默认事件（拖动的默认事件为在新窗口中打开）
}); // dragleave: 当被拖拽的元素对象离开其容器范围内触发 $(‘one‘).addEventListener(‘dragleave‘, function (e) { // $(‘one‘).innerHTML += ‘离开‘; e.preventDefault(); // 阻止默认事件 }); // 投放事件(注意控制对象为拖拽元素的目的地元素) // drop: 在一个拖动过程中，鼠标释放触发 $(‘one‘).addEventListener(‘drop‘, function () { $(‘one‘).appendChild($(‘two‘)); }); } </script> </body> </html>
前端代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 200px; height: 200px; border: 2px dashed #ccc; } </style> </head> <body> <div id="box">请拖入文件进行上传！很炫酷哟！</div> <script type="text/javascript"> var box = document.getElementById(‘box‘); box.addEventListener(‘dragenter‘, function (e) { e.preventDefault(); }); box.addEventListener(‘dragover‘, function (e) { box.innerHTML = ‘已有东西进入，请松开‘; e.preventDefault(); }); box.addEventListener(‘dragleave‘, function (e) { box.innerHTML = ‘赶紧回来‘; e.preventDefault(); }); box.addEventListener(‘drop‘, function (e) { box.innerHTML = ‘已经松开‘; // console.log(e.dataTransfer.files[0]); // lastModified: 1561646705661 // lastModifiedDate: Thu Jun 27 2019 22: 45: 05 GMT + 0800(中国标准时间) { } // name: "个人简历.pdf" // size: 196022 // type: "application/pdf" var file = e.dataTransfer.files[0]; var fd = new FormData(); fd.append(‘pic‘, file); var xhr = new XMLHttpRequest(); xhr.open(‘post‘, ‘3-3.php‘); xhr.send(fd); xhr.addEventListener(‘readystatechange‘, function () { if (this.readyState === 4) { // console.log(1111); // console.log(this.responseText); box.innerHTML += this.responseText; } }); e.preventDefault(); }); </script> </body> </html>
后端代码（PHP实现）：
if (isset($_FILES)) { $orgin = $_FILES[‘pic‘][‘tmp_name‘]; $target = $_FILES[‘pic‘][‘name‘]; $moved = move_uploaded_file($orgin, ‘./‘ . $target); if (!$moved) { echo ‘上传失败‘; } echo ‘, 且上传成功‘; }
当我们将某一文件（这里我用一张图片）拖f放到这个容器中后，这个图片就到了这个指定得文件夹中。
原文：https://www.cnblogs.com/duxiu-fang/p/11107672.html