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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天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和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

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

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