html5中ondrop()事件无效

最新推荐文章于 2024-03-11 20:30:27 发布
最新推荐文章于 2024-03-11 20:30:27 发布
阅读量1w 收藏 2
点赞数 2
分类专栏： 前端知识 文章标签： js 拖动放置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kosum/article/details/46907901
版权

在html5中,遇到ondrop()事件无效，可能原因是浏览器的默认操作，需执行事件阻止系统的默认操作。

obj.ondragover = function(e){

   e.preventDefault();

}

obj.ondrop = function(e){

 e.preventDefault();

}

ondrop事件无效，释放鼠标键时触发此事件无效
高山景行，一尘不染
08-14 2224
注意：在拖拽事件中遇到目标元素ondrop事件没有效果，需要在目标元素上写ondragover事件，阻止ondragover的默认行为，然后ondrop事件才起作用 拖拽的api: 在拖动目标上触发事件(源元素): ondragstart- 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend- 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragove...
h5 拖拽接口中遇到的问题
xdAdvent的博客
09-19 747
拖拽接口基本知识 1. 应用于被拖拽元素的事件 ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续 ondragstart 应用于拖拽元素，当拖拽开始时调用 ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用 ondragend 应用于拖拽元素，当拖拽结束时调用 2. 应用于目标元素的事件 ondragenter 应用于目标元素，当拖拽元...
H5中ondrop事件监听不到，原因竟然跟dragover事件有关！！
haoyanyu_的博客
11-20 2670
问题及解决方法 被拖拽元素拖到目标元素后，本想通过目标元素监听ondrop事件来进行业务处理，但是实现过程中发现ondrop事件并没有触发。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
html5中ondrop事件无效
zhangjing1019的博客
09-04 4754
在拖拽事件中遇到目标元素ondrop事件没有效果， 需要在目标元素上写ondragover事件，阻止ondragover的默认行为，然后ondrop事件才起作用 el.ondragover = function(e){ e.preventDefault(); } el.ondrop = function(e){ e.preventDefault(); } ...
vue拖拽 ondrop不生效
最新发布
qq_49438965的博客
03-11 765
在 Vue 中使用拖拽功能，要使ondrop事件生效，需要确保在相应的元素上取消ondragover事件的默认行为，并且要阻止ondrop事件的默认行为。以下是一个可用示例：
html ondrop未触发,javascript – TableDnD onDrop事件未触发
weixin_35911805的博客
06-16 349
我确定这是非常简单的东西,通常是.$('#sort-table').tableDnD({onDragClass: "dnd_drag",onDragStart: function(table,row) {console.log("start drag");},onDrop: function(table,row) {console.log($.tableDnD.serialize());},dra...
html拖拽不能放下,HTML拖拽时Drop偶尔不激发的问题
weixin_39995280的博客
06-15 597
问题描述：在HTML拖拽的程序中，我们会用到dragstart，dragover，drop和dropend这四个事件。但是在鼠标拖拽速度太快的情况下，有时会不触发drop事件，也就是说明明鼠标已经拖到了可放置区域，dragover也设置了event.dataTransfer.dropEffect为可放置的样式，但是松手的时候并没触发drop事件，直接触发了dragend。解决思路：准备两个变量，变...
如何在html5中并排放入两张图片,HTML_Html5实现如何在两个div元素之间拖放图像，原本效果 拖拽之后效果 - phpStudy...
weixin_42399813的博客
06-07 1099
Html5实现如何在两个div元素之间拖放图像原本效果拖拽之后效果代码如下复制代码代码如下:[code]#div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}function allowDrop(ev){ev.preventDefault();}fu...
drag事件，html5新特性
weixin_46567428的博客
03-17 489
drag事件，html5新特性 拖放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 drag事件的使用 1.将元素设置为可拖放 将属性draggable设置为true draggable="true" 2.拖动的是什么 在元素拖放的过程中会发生什么？ 其实拖动的是元素的数据 通过 event.dataTransfer.setData()方法可以设置拖动的数据类型和值 function drag(e) { e.dataTransfer
搞懂html5新增的拖放API（分析火狐和其它浏览器的不同）
guozengjie的专栏
04-16 2036
1.为什么ondrop事件不被调用 当我们直接写document.ondrop=function(e){alert("test")};这个test是不会被弹出的，因为html元素默认是阻止放的操作的，自然这个事件也不会被激发，所以想让这个事件被调用，必须加上这个，document.ondragover=function(e){  return false;  }  ondrop这个事件才
Win7下的DragEnter、DragDrop事件不触发的解决方案
weixin_34390996的博客
09-27 635
  　　Win7与原来的XP和Win2003相比，安全控制方面更严格。比如，当我们以administrator登陆XP或Win2003时，运行所有的程序即是以管理员的身份启动的。但当以administrator登陆Win7时，通常状态下，运行普通程序是以普通用户的身份启动的。当我们的WinForm应用程序需要以管理员的身份运行时（比如，为了访问windows注册表），我们需要在程序清单（app....
html5drop 无效,javascript – HTML5 / Canvas onDrop事件未触发？
weixin_32445049的博客
06-04 650
我正在玩文件上传,拖放和画布,但由于某种原因,ondrop函数似乎永远不会运行,这里是我工作的小提琴：http://jsfiddle.net/JKirchartz/E4yRv/相关代码是：canvas.ondrop = function(e) {e.preventDefault();var file = e.dataTransfer.files[0],reader = new FileReader...
采坑：ondrop释放拖拽不触发
mslmsl66的博客
12-15 2487
问题：做一个表头拖拽的小功能点，直接用原生事件，dragstart、dragover都触发，但drop不触发 原因：handleDragOver事件用了throttle，节流中使用event.preventDefault()，导致drop不触发。去掉节流就行。
html ondrop未触发,为什么ondrop html事件没有被解雇？ - javascript代码 - 源码查
weixin_31198993的博客
06-25 143
问题I am trying to make a item system for my game, which will allow players to move items between slots by dragging and dropping them. As my test, I made a basic system with an item that can be dragged ...
html ondrop未触发,HTML5/Canvas onDrop事件不会触发？
weixin_32233571的博客
06-16 200
相关的代码是：canvas.ondrop = function(e) {e.preventDefault();var file = e.dataTransfer.files[0],reader = new FileReader();reader.onload = function(event) {var img = new Image(),imgStr = event.target.result;...
html5drop 无效,html5 Drop 事件详解（摘自w3school）
weixin_28786857的博客
06-04 1079
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：1拖动什么 - ondragstart 和 setData()然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.s...
html拖拽事件ondrop无效
qq_42927276的博客
03-17 2418
在Html里做拖拽时，发现定义了ondragstart，ondragleave， ondrop事件后，ondrop始终不触发，原因是没有定义ondragover事件，ondragover事件是被拖拽元素在目标元素上拖拽过程中由目标元素触发，需要取消掉它的默认事件才可以正确触发e.preventDefault()，ondrop事件是被拖拽元素在目标元素上面drop的时候由目标元素触发 ...
DOM drag 事件
雾里看花叹朦胧
03-08 3828
拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 &amp;lt;div draggable=&quot;true&quot;&amp;gt; 此...
vue拖拽@drop不生效解决方式
haosicx的博客
04-16 5134
想要一个原生可以进行拖拽 可以使用HTML5的一个属性draggable='true' <div class="widget" draggable='true'>pie</div> 加上了后这个元素就开启了拖拽 然后在需要放置的元素上注册一个@drop='函数'来接收拖拽的元素 但是你会发现元素拖拽上去了也没有生效 这是因为还需要阻止一个默认事件 @dragover="e=>e.preventDefault()" 加上后就可以了 <div class="
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值