【前端】【H5 API】拽託
阿新 • • 發佈：2022-03-15
拖曳操作需要藉助於滑鼠來實現，如檔案或圖片的移動操作等。在開發中，我們經常使用原生的JavaScript來實現拖曳效果，實現起來比較複雜。因此，HTML5為我們提供了更好用的介面或者事件，在很大程度上簡化了頁面中拖曳互動的實現難度。
圖片和連結預設是可以拖動的，它們不用新增draggable屬性。
一個完整的拖曳效果由拖曳（Drag）和釋放（Drop）組成的。
在拖曳操作中，被拖動的元素稱之為源物件，它指的是頁面中設定了draggable="true"屬性的元素；
源物件進入的元素稱之為目標元素，目標元素可以是頁面中的任一元素
拖曳元素的事件
| 事件 | 事件描述 |
|---|---|
| ondragstart | 當拖曳開始時觸發 |
| ondrag | 作用於整個拖曳過程，ondrag事件表示在拖曳元素被拖動過程中會觸發的事件。此時，滑鼠可能在移動也可能未移動。 |
| ondragend | 當拖曳結束時觸發 |
目標元素相關的事件
| 事件 | 事件描述 |
|---|---|
| ondragenter | 當源物件進入目標元素時觸發 |
| ondragover | 當源物件懸停在目標元素上方時觸發 |
| ondragleave | 當源物件離開目標元素時觸發 |
| ondrop | 當源物件在目標元素上方釋放滑鼠時觸發 |
只有當源物件上的滑鼠點進入目標元素時，才會觸發ondragenter事件。
預設情況下，瀏覽器會預設阻止ondrop事件，如果想要觸發該事件,則需要在ondragover事件中使用“return false;”
（或者e.preventDefault()）來阻止其預設行為
拽托實例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; border: 1px solid red; float: left; margin: 10px; } div:nth-child(2) { border: 1px solid green; } div:nth-child(3) { border: 1px solid blue; } p { height: 25px; background-color: pink; line-height: 25px; text-align: center; } </style> </head> <body> <div id="div1"> <p id="p1" draggable="true">拖曳內容1</p> <p id="p2" draggable="true">拖曳內容2</p> </div> <div id="div2"></div> <div id="div3"></div> <script> // 當拖曳開始時觸發 document.ondragstart = function (event) { console.log('源物件開始被拖動'); console.log(event.target.id); event.dataTransfer.setData('text/html', event.target.id); // 傳遞id值 }; // 當拖曳結束時觸發 document.ondragend = function (event) { console.log('源物件被拖動結束'); }; </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖曳內容1</p>
<p id="p2" draggable="true">拖曳內容2</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 當拖曳開始時觸發
document.ondragstart = function (event) {
console.log('源物件開始被拖動');
console.log(event.target.id);
event.dataTransfer.setData('text/html', event.target.id); // 傳遞id值
};
// 當拖曳結束時觸發
document.ondragend = function (event) {
console.log('源物件被拖動結束');
};
// 當源物件進入目標元素時
document.ondragenter = function (event) {
console.log('目標物件被源物件拖動著進入');
console.log(event.target);
};
// 當源物件懸停在目標元素上方時觸發
document.ondragover = function (event) {
console.log('源物件懸停在目標元素上方');
return false;
};
// 當源物件在目標元素上方釋放滑鼠時
document.ondrop = function (event) {
console.log('上方釋放/鬆手');
var id = event.dataTransfer.getData('text/html');
event.target.appendChild(document.getElementById(id));
};
</script>
</body>
</html>