详解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/n/250728.html