HTML怎么用JS实现拖拽功能？dragstart与ondrop事件监听-html教程-PHP中文网

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

爱谁谁

发布： 2025-06-28 19:08:01

原创

110人浏览过

要通过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事件监听的详细内容，更多请关注php中文网其它相关文章！