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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《HTML如何用JS实现拖拽？dragstart与ondrop事件监听》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

要通过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和drop事件，并配合draggable属性使用。这允许用户通过鼠标或其他输入设备，在页面上移动元素。

解决方案：

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

   

   拖拽我！
   放到这里

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

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

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

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

4. 监听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属性来实现。

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

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

2. 在dragend事件中移除： 当拖拽结束时，移除添加的类名或样式，恢复默认的鼠标样式。

   draggableElement.addEventListener('dragend', (event) => {
     document.body.classList.remove('dragging');
   });

3. 使用CSS定义样式： 在CSS中，定义dragging类的样式，改变鼠标样式。

   body.dragging {
     cursor: grabbing; /* 或其他你想要的样式 */
   }

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

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

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

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

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

   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);
     });
   });

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

   Item 1
   Item 2
   
   Target 1
   Target 2

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。