JS实现拖拽效果注意点

最新推荐文章于 2022-09-30 11:55:37 发布

.loomf

最新推荐文章于 2022-09-30 11:55:37 发布

阅读量244

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44777554/article/details/112152377

版权

本文记录了在JavaScript和HTML5中实现拖拽效果的关键步骤，包括监听dragstart、drag、dragover、dragleave、dragenter和drop事件。特别强调在drop事件中阻止默认事件以防止拖拽结束后出现问题。

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

最近工作中要去实现组织架构的拖拽行为，然后被一个点给坑了乘着周末有时间记录一下避免再次采坑

简单效果图示：

在这里插入图片描述

步骤：

其实就是监听几个事件，主要是坑在最好一步放入的时候需要阻止拖拽结束的默认事件

拖拽开始 dragstart
拖拽中 drag
拖拽结束 dragover
拖拽离开 dragleave
拖拽进入 drageenter
监听放入 drop 需要阻止默认事件并且阻止拖拽结束的默认事件

简单代码：

<body>
<div class="box">
    <div class="content" id="info" draggable="true">
        这里是内容
    </div>
</div>
<div class="box"></div>
<div class="box"></div>
<script>
// 声明拖拽元素变量
    let dragDom;

    // 监听拖拽开始
    document.addEventListener('dragstart', function (e) {
        if (e.tar