知識點（滑鼠跟隨）： 下麵這個例子的效果就是滑鼠點擊元素後，元素跟著滑鼠移動 知識點（滑鼠拖拽） 以上3個事件的控制對象為被拖拽的元素 （整個過程我們可以稱之為拖拽區） 以上4個事件的控制對象為被拖追元素的目的容器（整個過程我們可以稱之為投放區） 實例1（將一個容器拖放到另一個容器中） 實例2(文件 ...
知識點（滑鼠跟隨）：
- mousedown: 當用戶用滑鼠點擊在某一元素上就會觸發該事件
- mouseover: 當滑鼠指針在某一元素上移動就會觸發改事件
下麵這個例子的效果就是滑鼠點擊元素後，元素跟著滑鼠移動
<!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>
知識點（滑鼠拖拽）
- dragstart: 用戶開始拖拽時觸發該事件
- drag: 用戶正在拖拽時觸發該事件
- dragend: 用戶結束拖拽時觸發該事件
以上3個事件的控制對象為被拖拽的元素 （整個過程我們可以稱之為拖拽區）
- dragenter: 當被拖拽的元素對象進入其容器範圍內時觸發該事件
- dragover: 當被拖拽的元素對象在其容器範圍內拖拽時觸發該事件
- dragleave: 當被拖拽的元素對象離開其容器範圍內觸發該事件
- drop: 在一個拖拽過程中，滑鼠釋放觸發該事件
以上4個事件的控制對象為被拖追元素的目的容器（整個過程我們可以稱之為投放區）
實例1（將一個容器拖放到另一個容器中）
<!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>
實例2(文件拖拽上傳)
前端代碼：
<!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放到這個容器中後，這個圖片就到了這個指定得文件夾中。
