当前位置：首页 > 文章列表 > 文章 > 前端 > HTML拖拽实现：JS监听dragstart与ondrop事件

HTML拖拽实现：JS监听dragstart与ondrop事件

2025-06-26 20:59:38 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《HTML如何用JS实现拖拽？dragstart与ondrop事件监听》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

要通过JS在HTML中实现拖拽功能，核心在于设置draggable属性并监听dragstart、dragover和drop事件。具体步骤如下：1. 给需要拖拽的元素添加draggable="true"属性；2. 使用JavaScript监听dragstart事件，并通过event.dataTransfer.setData()设置拖动数据；3. 在目标元素上监听dragover事件并调用event.preventDefault()以允许放置；4. 监听drop事件，获取拖动数据并通过appendChild等操作完成元素移动。此外，为改善用户体验，可在dragstart时添加CSS类改变鼠标样式并在dragend时移除该类；对于多个元素间的拖拽，需为所有可拖拽元素和目标元素分别添加事件监听器，并确保HTML结构正确，以便实现完整的拖拽交互。

HTML怎么用JS实现拖拽功能？dragstart与ondrop事件监听

HTML通过JS实现拖拽功能，核心在于监听dragstart和drop事件，并配合draggable属性使用。这允许用户通过鼠标或其他输入设备，在页面上移动元素。

解决方案：

设置元素可拖拽： 首先，在HTML中，给需要拖拽的元素添加draggable="true"属性。

<div id="draggableElement" draggable="true">拖拽我！</div>
<div id="dropTarget">放到这里</div>

监听dragstart事件： 接下来，使用JavaScript监听dragstart事件。这个事件在元素开始被拖动时触发。在事件处理函数中，你可以设置拖动的数据。

const draggableElement = document.getElementById('draggableElement');

draggableElement.addEventListener('dragstart', (event) => {
  // 设置拖动的数据，这里使用文本数据
  event.dataTransfer.setData('text/plain', event.target.id);
});

监听dragover事件： 为了使元素能够被放置（drop），你需要在目标元素上监听dragover事件。这个事件在元素被拖动到目标元素上方时触发。需要注意的是，必须阻止dragover事件的默认行为，否则drop事件不会触发。
```
const dropTarget = document.getElementById('dropTarget');

dropTarget.addEventListener('dragover', (event) => {
  event.preventDefault(); // 阻止默认行为，允许drop
});
```

监听drop事件： 最后，监听drop事件。这个事件在元素被放置到目标元素上时触发。在事件处理函数中，你可以获取拖动的数据，并执行相应的操作，例如移动元素。

dropTarget.addEventListener('drop', (event) => {
  event.preventDefault(); // 阻止默认行为

  const data = event.dataTransfer.getData('text/plain');
  const draggableElementId = document.getElementById(data);
  dropTarget.appendChild(draggableElementId); // 将拖动元素添加到目标元素
});

为什么`dragover`事件需要`preventDefault()`？

默认情况下，浏览器不允许元素被放置到其他元素上。dragover事件的默认行为是阻止放置操作。通过调用event.preventDefault()，我们告诉浏览器允许放置操作，从而触发drop事件。如果没有阻止默认行为，drop事件将不会被触发，拖拽操作将无法完成。

如何在拖拽过程中改变鼠标样式？

在拖拽过程中改变鼠标样式，可以提供更好的用户体验。可以使用CSS的cursor属性来实现。

在dragstart事件中设置： 当元素开始被拖动时，可以添加一个类名到body上，或者直接修改元素的样式，来改变鼠标样式。

draggableElement.addEventListener('dragstart', (event) => {
  document.body.classList.add('dragging');
  event.dataTransfer.setData('text/plain', event.target.id);
});

在dragend事件中移除： 当拖拽结束时，移除添加的类名或样式，恢复默认的鼠标样式。
```
draggableElement.addEventListener('dragend', (event) => {
  document.body.classList.remove('dragging');
});
```
使用CSS定义样式： 在CSS中，定义dragging类的样式，改变鼠标样式。
```
body.dragging {
  cursor: grabbing; /* 或其他你想要的样式 */
}
```

如何实现多个元素之间的拖拽？

实现多个元素之间的拖拽，需要确保每个可拖拽元素都有draggable="true"属性，并且监听它们的dragstart事件。同时，每个目标元素都需要监听dragover和drop事件。

给所有可拖拽元素添加事件监听： 遍历所有需要拖拽的元素，并添加相同的事件监听器。

const draggableElements = document.querySelectorAll('.draggable');

draggableElements.forEach(element => {
  element.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', event.target.id);
  });
});

给所有目标元素添加事件监听： 同样，遍历所有目标元素，并添加事件监听器。

const dropTargets = document.querySelectorAll('.drop-target');

dropTargets.forEach(target => {
  target.addEventListener('dragover', (event) => {
    event.preventDefault();
  });

  target.addEventListener('drop', (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    const draggableElement = document.getElementById(data);
    target.appendChild(draggableElement);
  });
});

HTML结构： 确保HTML结构正确，可拖拽元素和目标元素都有相应的类名。

<div class="draggable" id="item1" draggable="true">Item 1</div>
<div class="draggable" id="item2" draggable="true">Item 2</div>

<div class="drop-target" id="target1">Target 1</div>
<div class="drop-target" id="target2">Target 2</div>

通过以上步骤，可以实现多个元素之间的拖拽功能。注意，需要根据实际需求调整代码，例如添加错误处理、优化性能等。

理论要掌握，实操不能落！以上关于《HTML拖拽实现：JS监听dragstart与ondrop事件》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

html JS