H5拖拽的簡單實現
阿新 • • 發佈：2018-12-17
在H5中，如果想要拖拽某個元素，需要給它新增 draggable=“true” 屬性。圖片和超連結預設可以拖拽。
<body>
<div class="div1" id="div1">
<!-- 被拖拽元素 -->
<p id="p1" draggable="true">內容</p>
</div>
<div class="div2" id="div2">
<!-- 目標元素 -->
</div>
</body>
被拖拽元素事件
| 事件 | 描述 |
|---|---|
| ondragstart | 拖拽開始時呼叫 |
| ondragleave | 滑鼠離開被拖拽元素時呼叫 |
| ondragend | 拖拽結束時呼叫 |
| ondrag | 整個拖拽過程中都會呼叫 |
目標元素事件
| 事件 | 描述 |
|---|---|
| ondragenter | 當拖拽元素進入時呼叫 |
| ondragover | 當拖拽元素停留在目標元素上時呼叫 |
| ondragleave | 滑鼠離開目標元素時呼叫 |
| ondrop | 當在目標元素上鬆開滑鼠時呼叫 |
注意：
瀏覽器會預設阻止ondrop事件的執行，如果想執行ondrop事件，必須在ondragover事件中阻止瀏覽器的預設行為。
單項拖拽
var p1 = document.querySelector("#p1"); // 獲取拖拽元素
var div2 = document.querySelector("#div2"); // 獲取目標元素
/**
* 當被拖拽元素停留在目標元素上時
* @param e
*/
div2.ondragover = function (e) {
e.preventDefault(); // 阻止瀏覽器預設行為
};
/**
* 在目標元素上鬆開滑鼠時
*/
div2.ondrop = function 雙向拖拽
var p1 = document.querySelector("#p1"); // 獲取拖拽元素
// 獲取目標元素
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
div1.ondragover = function (e) {
e.preventDefault();
};
div1.ondrop = function () {
div1.appendChild(p1);
};
/**
* 當被拖拽元素停留在目標元素上時
* @param e
*/
div2.ondragover = function (e) {
e.preventDefault(); // 阻止瀏覽器預設行為
};
/**
* 在目標元素上鬆開滑鼠時
*/
div2.ondrop = function () {
// 在目標元素中新增被拖拽元素
div2.appendChild(p1);
};
適用範圍更廣的寫法
<script>
/**
* 當拖拽開始時觸發
*/
document.ondragstart = function (e) {
e.target.style.opacity = 0.5;
// 儲存被拖拽元素的ID
e.dataTransfer.setData("text", e.target.id);
};
/**
* 當拖拽結束時觸發
*/
document.ondragend = function (e) {
e.target.style.opacity = 1;
};
/**
* 當被拖拽元素停留在目標元素上時
* @param e
*/
document.ondragover = function (e) {
e.preventDefault(); // 阻止瀏覽器預設行為
};
/**
* 在目標元素上鬆開滑鼠時
*/
document.ondrop = function (e) {
// 獲取被拖拽元素的ID
var id = e.dataTransfer.getData("text");
let obj = document.getElementById(id);
e.target.appendChild(obj);
};
</script>