H5中ondrop事件监听不到，原因竟然跟dragover事件有关！！

最新推荐文章于 2023-06-22 15:27:16 发布

haoyanyu_

最新推荐文章于 2023-06-22 15:27:16 发布

阅读量2.5k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/haoyanyu_/article/details/103171200

版权

在H5中，当尝试通过ondrop事件进行业务处理时，发现该事件并未触发。问题在于，要使drop事件生效，必须在目标元素上添加dragover事件并阻止其默认行为。理解拖放事件的完整流程dragstart->drag->dragenter->dragover->drop->dragend，其中dragover事件允许放下元素，从而触发drop。

摘要由CSDN通过智能技术生成

问题及解决方法

被拖拽元素拖到目标元素后，本想通过目标元素监听ondrop事件来进行业务处理，但是实现过程中发现ondrop事件并没有触发。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖拽测试</title>
  <style>
    #drag-target {
      background: green;
      width: 80px;
      height:30px;
      font-size:16px;
      padding: 20px;
      cursor: move;
    }
    #drag-aim {
      list-style: none;
      padding:0;
    }
    #drag-aim li {
      padding:0;
      margin: 20px 0;
      height: 40px;
      border: 1px solid #eee;
      border-radius: 5px;
    }
    #drag-aim li.active {
      background: rgba(255, 0, 0, .5);
      border-color: red;
      transition: all 0.3s;

最低0.47元/天解锁文章

haoyanyu_

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5中ondrop事件监听不到，原因竟然跟dragover事件有关！！

问题及解决方法被拖拽元素拖到目标元素后，本想通过目标元素监听ondrop事件来进行业务处理，但是实现过程中发现ondrop事件并没有触发。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...
复制链接

扫一扫