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

最新推荐文章于 2022-12-05 11:09:59 发布
最新推荐文章于 2022-12-05 11:09:59 发布
阅读量4.3k 收藏 2
点赞数
分类专栏： js html5 文章标签： html5拖拽 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39634880/article/details/80376708
版权
js 同时被 2 个专栏收录
40 篇文章 0 订阅
订阅专栏
html5
5 篇文章 0 订阅
订阅专栏

在火狐上不兼容这一套：

<!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>

 

Future_object
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 拖放---（二）转
weixin_34066347的博客
03-21 57
draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值： true 表示此元素可拖拽 false 表示此元素不可拖拽 auto 除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽 其它任何值 表示不可拖拽 事件： 【被拖拽元素】   ondragstart 拖拽前触发（...
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
最新发布
weixin_65793170的博客
05-30 4465
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
火狐打开html js效果,Javascript 拖动效果兼容火狐
weixin_42547431的博客
06-03 100
鼠标拖动层封装类 效果预览 拖动层1 移动层拖动层2 移动层 源代码 function dragClass(){ this.mouseState = document.all ? 1 : 0 ; this.x; this.y; this.dragId = null; this.index = 100; document.onsel...
3.9 JavaScript-事件
学习交流记录
05-11 535
JavaScript-事件
h5页面禁止用户拖动
zhangxy
06-22 1274
//等待2s 出现弹窗 setTimeout(function () { $("#mask").attr("style","display:block"); //开启弹窗，禁止用户拖页面 $("html,body").css("overflow","hidden").css("height","100%"); document.body.addEventListener('touchmove', self.welcomeShowedListener, false);.
HTML5 拖拽复制功能的实现
10-21
1. 阻止默认行为：为了让元素能够在目标区域上放下，我们需要在`ondragover`事件中调用`event.preventDefault()`，阻止默认的禁止放置行为。 ```javascript function allowDrop(ev) { ev.preventDefault(); } ``` ...
HTML5 新事件 小结
01-19
HTML 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。 HTML 4.01 与 HTML 5 之间的差异 HTML...
HTML5如何实现元素拖拽
09-28
5. `ondragover`：拖动元素在目标元素上方移动时持续触发，需要调用`event.preventDefault()`防止默认的浏览器行为（例如阻止文件拖放）。 6. `ondragleave`：当拖动元素离开目标元素时触发，用于取消目标元素的...
HTML5事件方法全部汇总
09-28
HTML5事件方法是网页开发中...在实际开发中，通过结合JavaScript和HTML5事件方法，可以实现各种功能，如表单验证、动态效果、媒体控制等。理解并熟练运用这些事件方法对于构建高性能、用户体验优秀的Web应用至关重要。
HTML5拖拽API经典实例详解
09-27
在这个经典实例详解中，我们将深入理解拖拽API的基本概念，了解相关函数，并探讨如何在源对象和目标对象之间传递数据。 一、拖拽API概述 拖拽API是HTML5引入的新特性，尽管它的重要性可能不如其他一些特性如Canvas...
HTML5 拖放（Drag 和 Drop）——0711
张静的博客
07-14 289
1、什么是拖放？ 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 2、如何实现拖放？ 1、首先，设置被拖放元素的属性 draggable="true"，将该元素设置为可拖放。 2、拖动什么——ondragstart 和 setData() 给被拖放元素添加ondragstart 事件，并在事件中调用event.dataTransfer.setData() 方法，在元素被拖动时，设置被拖数据的数据类型和值。 3、放到何处——ondragove
html5播放器禁止拖拽功能实例（教学内容禁止拖动观看）
阿酷tony
12-05 4909
html5播放器禁止拖拽功能实例（常用于场景：企业培训、在线教学内容禁止学员拖动视频进行观看），教学内容禁止拖动观看，参数开启后，视频教学内容或视频课件将不允许拖动进度条
不阻止ondragover默认事件就无法触发ondrop函数
qq_38926062的博客
12-09 3041
不阻止ondragover默认事件就无法触发ondrop函数 下面通过代码演示这个过程 &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt;
html5中ondrop()事件无效
迟到的程序猿
07-16 9941
在html5中,遇到ondrop()事件无效，可能原因是浏览器的默认操作，需执行事件阻止系统的默认操作。 obj.ondragover = function(e){    e.preventDefault(); }
火狐浏览器的 drag 事件
YCHH1的博客
05-14 529
关于火狐浏览器在drag事件拖拽时 自动打开窗口的问题 定义 dragstart 事件 <div class="iconCon"> <div v-for="(item,index) in iconArr" :key="index" class="device-item" :draggable="true" @dragstart="dragStartOnList($event, item)" > <img cla
拖拽------阻止浏览器默认事件
youyouyouyou44的博客
05-02 1331
用原生js写一个拖拽，需要考虑到兼容的问题，事件绑定的问题，浏览器默认事件的问题。 首先需要用到Event 对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta c...
html5 拖拽函数1--不兼容火狐
u012138854的博客
01-02 83
拖拽元素事件<br/>ondragstart拖拽前触发<br/>ondrag拖拽结束之前连续触发<br/>ondragend 拖拽结束前触发<br/>目标元素事件<br/>ondragenter进入目标元素触发 相当于mouseover<br/>ondragover 进入目标，离开目标之间连续触发<br/&gt...
drag事件兼容火狐浏览器方法
weixin_42869548的博客
06-04 2030
Firefox拖拽必须携带数据，也就是说必须出现这个： ev.dataTransfer.setData("infoName"," "); 就是在drag方法内加上此行代码就能使拖拽生效。 参考原文地址
html拖动图片到指定位置,HTML5和JS将多个图像拖放到特定位置
05-16
HTML5和JS提供了方便的API来实现拖放功能，可以轻松地将多个图像拖放到特定位置。 首先，需要为每个图像设置一个可拖动属性，可以使用HTML的draggable属性来实现： ```html <img src="image1.png" draggable="true"/> <img src="image2.png" draggable="true"/> <img src="image3.png" draggable="true"/> ``` 接下来，需要为拖动目标设置事件处理程序，以便在拖动时触发相应的操作。可以使用HTML的ondragstart事件来设置拖动开始时的操作： ```html <img src="image1.png" draggable="true" ondragstart="drag(event)"/> <img src="image2.png" draggable="true" ondragstart="drag(event)"/> <img src="image3.png" draggable="true" ondragstart="drag(event)"/> ``` 其中，drag(event)是一个自定义的JavaScript函数，用于处理拖动事件。 在drag(event)函数中，需要设置拖动数据，可以使用event.dataTransfer.setData()方法来设置拖动数据的类型和值。例如，可以将图像的URL作为文本数据传递： ```javascript function drag(event) { event.dataTransfer.setData("text", event.target.src); } ``` 接下来，需要为拖放目标设置事件处理程序，以便在拖放时触发相应的操作。可以使用HTML的ondragover事件来设置拖放目标的操作： ```html <div ondragover="allowDrop(event)" ondrop="drop(event)"></div> ``` 其中，allowDrop(event)和drop(event)是两个自定义的JavaScript函数，用于处理拖放事件。 在allowDrop(event)函数中，需要阻止默认的拖放行为，可以使用event.preventDefault()方法： ```javascript function allowDrop(event) { event.preventDefault(); } ``` 在drop(event)函数中，需要获取拖放数据，并将图像放置到特定位置。可以使用event.dataTransfer.getData()方法来获取拖放数据的类型和值。例如，可以将图像的URL作为文本数据传递，然后创建一个新的img元素，并将其src属性设置为拖放数据的值： ```javascript function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var img = document.createElement("img"); img.src = data; event.target.appendChild(img); } ``` 这样，就可以实现将多个图像拖放到特定位置的功能了。完整的示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Drag and Drop</title> <style> div { border: 1px solid black; height: 300px; width: 300px; } </style> <script> function drag(event) { event.dataTransfer.setData("text", event.target.src); } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var img = document.createElement("img"); img.src = data; event.target.appendChild(img); } </script> </head> <body> <img src="image1.png" draggable="true" ondragstart="drag(event)"/> <img src="image2.png" draggable="true" ondragstart="drag(event)"/> <img src="image3.png" draggable="true" ondragstart="drag(event)"/> <div ondragover="allowDrop(event)" ondrop="drop(event)"></div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值