html5拖拽，要在ondragover阻止这个默认事件,和解决火狐上的兼容问题

最新推荐文章于 2025-06-17 17:33:58 发布

原创最新推荐文章于 2025-06-17 17:33:58 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5拖拽 #js

js 同时被 2 个专栏收录

40 篇文章

订阅专栏

html5

5 篇文章

订阅专栏

本文介绍了一种解决火狐浏览器中拖拽操作兼容性问题的方法，通过使用ev.dataTransfer.setData和ev.dataTransfer.getData方法实现跨浏览器一致的拖拽效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在火狐上不兼容这一套：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            width: 100px;
            height: 50px;
            background: yellow;
            margin: 10px;
        }

        #con {
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <ul id="list">
        <!--光标更改为 圈形状，表示具备了拖拽的效果-->
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
    </ul>
    <div id="con">拖拽目的地</div>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('list');
            var aLi = oUl.getElementsByTagName('li');
            var oCon = document.getElementById('con');
            for (var i = 0; i < aLi.length; i++) {
                //开始拖拽
                aLi[i].ondragstart = function () {
                    this.style.background = "blue";
                }
                // //拖拽中，持续性触发 //火狐上有兼容问题
                // var a = 0;
                // aLi[i].ondrag = function(){
                // a++;
                // console.log(a);
                // }

                //拖拽结束////火狐上有兼容问题
                aLi[i].ondragend = function () {
                    this.style.background = 'green';
                }
            }
            //目标元素的拖拽事件
            //进入目的地
            oCon.ondragenter = function () {
                this.style.background = 'pink';
            }
            //在目的地上   ，持续触发
            var b = 0;
            oCon.ondragover = function (ev) {
                b++;
                console.log(b);
                //阻止默认事件
                var ev = ev || window.event;
                ev.preventDefault();
            }
            //离开目的地
            oCon.ondragleave = function () {
                this.style.background = 'orange';
            }
            //在目的地上释放鼠标
            //ondrop 和ondragleave 是冲突的，想要 ondrop 触发，必须 在ondragleave之前禁用 ,在 ondragover //将默认事件禁用
            oCon.ondrop = function () {
                alert(666);
            }
        }
    </script>
</body>
</html>

这一套可以兼容火狐：主要是设置ev.dataTransfer.setData('name','lili');这个方法就可以兼容火狐，可以

用ev.dataTransfer.getData('name')来获取传过来的数据，拖拽购物车就是用这个方法干的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            width: 100px;
            height: 50px;
            background: yellow;
            margin: 10px;
        }

        #con {
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <ul id="list">
        <!--光标更改为 圈形状，表示具备了拖拽的效果-->
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
    </ul>
    <div id="con">拖拽目的地</div>
    <script>
        window.onload = function () {
            var oUl = document.getElementById('list');
            var aLi = oUl.getElementsByTagName('li');
            var oCon = document.getElementById('con');
            for (var i = 0; i < aLi.length; i++) {
                //开始拖拽
                aLi[i].ondragstart = function (ev) {
                    this.style.background = "blue";
                    //设置属性dataTransfer   两个参数   1：key   2：value
                    var ev = ev || window.event;
                    ev.dataTransfer.setData('name', 'lili');
                }
                // //拖拽中，持续性触发 //火狐上有兼容问题
                // var a = 0;
                // aLi[i].ondrag = function(){
                // a++;
                // console.log(a);
                // }
                //拖拽结束////火狐上有兼容问题
                aLi[i].ondragend = function () {
                    this.style.background = 'green';
                }
            }
            //目标元素的拖拽事件
            //进入目的地
            oCon.ondragenter = function () {
                this.style.background = 'pink';
            }
            //在目的地上   ，持续触发
            var b = 0;
            oCon.ondragover = function (ev) {
                b++;
                console.log(b);
                //阻止默认事件
                var ev = ev || window.event;
                ev.preventDefault();
            }
            //离开目的地
            oCon.ondragleave = function () {
                this.style.background = 'orange';
            }
            //在目的地上释放鼠标
            //ondrop 和ondragleave 是冲突的，想要 ondrop 触发，必须 在ondragleave之前禁用 ,在 ondragover //将默认事件禁用
            oCon.ondrop = function (ev) {
                //alert(666);
                //获取参数
                alert(ev.dataTransfer.getData('name'));
            }
        }
    </script>
</body>
</html>