dragenter和dragover区别

发布于 2022-09-13 00:49:56 字数 1813 浏览 25 评论 0

关于拖拽的问题有几个小疑问,希望各位朋友不吝赐教
https://developer.mozilla.org...
https://developer.mozilla.org...
所以我的理解是:dragenter和dragover类似,只不过dragover是触发多次

再看这个:https://developer.mozilla.org...
image.png

问题:
为什么我仅仅在dragover事件中阻止默认行为就可以完成拖拽,而仅仅在dragenter中阻止默认行为就无法完成拖拽,按照手册的说法是需要在两个事件中都阻止默认行为,而我个人的理解是在两个事件中的任何一个里阻止默认行为就可以完成拖拽,然而代码测试的结果和手册以及我个人的理解都对不上,请教各位

测试代码:

<style type="text/css">
        #drag {
            width: 100px;
            height: 100px;
            background: red;
        }

        #drag_to {
            width: 200px;
            height: 200px;
            border: 1px solid green;
        }

    </style>
<div draggable="true" id="drag">拖拽div</div>
<div id="drag_to">投放区</div>
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<script type="text/javascript">
    // let drag_obj = $('#drag');
    let drag_to_obj = $('#drag_to');

    drag_to_obj.on('dragenter', function () {
        console.log('拖拽对象进入投放区');
        return false;
    });

    drag_to_obj.on('dragover', function () {
        console.log('拖拽对象进入投放区ing');
        // return false;
    });

    drag_to_obj.on('dragleave', function () {
        console.log('拖拽对象离开投放区');
    });

    drag_to_obj.on('drop', function () {
        console.log('拖拽对象投放到投放区');
    });

</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文