詳解ondrag事件

一、onDragEnd

當拖拽操作結束時觸發onDragEnd事件。這個事件通常用於清除拖動元素的狀態和樣式。以下是一個實例代碼：

function handleDragEnd(e) {
  this.style.opacity = '1.0';
}

該函數的作用是當拖拽元素結束時將透明度設為1.0。

二、ondragstart

當拖拽操作開始時觸發ondragstart事件。這個事件通常用於設置被拖動元素的數據類型以及拖動效果（如幻影效果）。以下是一個實例代碼：

function handleDragStart(e) {
  this.style.opacity = '0.4';
  e.dataTransfer.setData('text/plain', '這是一段被拖動的文本');
}

該函數的作用是當拖拽元素開始時將透明度設為0.4，並設置被拖動的元素數據類型為純文本。

三、onDrag事件

onDrag事件在拖動操作期間每隔一段時間觸發一次。可以在該事件中實現拖動過程中的動態效果。以下是一個實例代碼：

function handleDragging(e) {
  // 在這裡實現拖動過程中的動態效果
}

該函數的作用是在拖拽過程中實現動態效果。

四、onDrag事件拖拽幻影

當拖拽元素時，會在滑鼠下方生成一個拖拽幻影。可以通過設置onDrag事件中的元素樣式來控制幻影效果。以下是一個實例代碼：

function handleDragging(e) {
  // 在這裡實現拖動過程中的動態效果
  this.style.boxShadow = '10px 10px 5px grey';
}

該函數的作用是在拖拽過程中為元素添加陰影效果。

五、onDragEvent

onDragEvent包含了所有拖動事件的信息，包括被拖動元素、滑鼠位置等。以下是一個實例代碼：

function handleDragging(e) {
  console.log(e.dragEvent); // 列印出拖動事件的信息
}

該函數的作用是在拖拽過程中列印出拖動事件的信息。

六、onDragOver = function ()

onDragOver事件會在拖拽元素經過一個可接受的放置目標（如另一個元素）時觸發。這時候需要調用preventDefault()方法來阻止默認的拖拽操作。以下是一個實例代碼：

function handleDragOver(e) {
  e.preventDefault();
}

該函數的作用是在拖拽過程中阻止默認的拖拽操作。

七、ondragstart return false

可以在ondragstart事件中返回false來阻止默認的拖拽操作。以下是一個實例代碼：

function handleDragStart(e) {
  return false;
}

該函數的作用是在拖拽開始時阻止默認的拖拽操作。

八、完整代碼示例：

<!DOCTYPE html>
<html>
<head>
  <title>ondrag事件示例</title>
  <style>
    #dragme {
      width: 100px;
      height: 100px;
      background-color: red;
      opacity: 1.0;
    }
  </style>
</head>
<body>
  <div id="dragme" draggable="true"></div>
  <script>
    var dragme = document.getElementById('dragme');
    dragme.addEventListener('dragstart', handleDragStart);
    dragme.addEventListener('drag', handleDragging);
    dragme.addEventListener('dragend', handleDragEnd);
    function handleDragStart(e) {
      this.style.opacity = '0.4';
      e.dataTransfer.setData('text/plain', '這是一段被拖動的文本');
      return false;
    }
    function handleDragging(e) {
      this.style.boxShadow = '10px 10px 5px grey';
    }
    function handleDragEnd(e) {
      this.style.opacity = '1.0';
    }
  </script>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/250728.html