首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么ondrop html事件没有触发?

ondrop HTML事件没有触发可能有以下几个原因:

  1. 缺少ondragover事件:在HTML元素上设置ondrop事件之前,需要先设置ondragover事件。ondragover事件用于指定在拖动元素悬停在目标元素上时的操作。如果没有设置ondragover事件,浏览器会默认阻止ondrop事件的触发。
  2. 拖放目标不可放置:确保目标元素设置了draggable属性为true,表示该元素可以被拖动。如果目标元素没有设置draggable属性,ondrop事件将不会触发。
  3. 拖放元素不可拖动:确保拖动的元素设置了draggable属性为true,表示该元素可以被拖动。如果拖动的元素没有设置draggable属性,ondrop事件将不会触发。
  4. 拖放元素和目标元素的类型不匹配:ondrop事件只会在拖动元素和目标元素的类型匹配时触发。例如,如果拖动的是一个文本元素,但目标元素期望接收图片类型的数据,那么ondrop事件将不会触发。
  5. 其他事件的影响:如果在拖放过程中触发了其他事件(例如ondragstart、ondragend等),可能会影响ondrop事件的触发。确保没有其他事件阻止了ondrop事件的触发。

以上是一些可能导致ondrop HTML事件没有触发的原因。如果仍然无法解决问题,可以进一步检查代码逻辑和浏览器的兼容性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android实现触发html页面的Button控件点击事件方式

在android开发中,往往有时会加载html界面,同时需要与之html里面的控件进行交互。这里简单介绍一下如何在android中触发加载的html界面的Button控件。 1....之后添加 webSettings.setJavaScriptEnabled(true); 意设置激活html里面的控件触发事件。...接下来看如何写控件的触发事件调用的方法: ? 假如我的html里面有两个button控件,第一个我是点击弹一个Toast效果,第二个点击跳转到另一个Activity界面的效果。...最后查看html布局中如何调用这两个方法: ? 从代码中可以看到,只需要在button控件的点击事件onclick中调用该方法就行。...以上这篇Android实现触发html页面的Button控件点击事件方式就是小编分享给大家的全部内容了,希望能给大家一个参考。

3.4K10

从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器

ondrop事件,那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件:我们必须在ondragover...遗留问题:如果有多个 div,那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数,也就是只能拖拽指定的元素到指定的元素中,这样代码的可用性就很低了。...=function(e){ /*如果想触发ondrop事件,那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*...", e.target.id); }; //应用于目标元素的事件 document.ondragover=function(e){ /*如果想触发ondrop事件...:通过该事件报告当前的播放进度 onended:播放完时触发 示例代码: <!

1.5K20

HTML5原生拖放事件的学习与实践

前言 之前学习了 HTML5 的拖放事件,开发中也用到了拖拽组件。为了厘清整体的逻辑,专门做了一个小例子。...1、被拖动元素的相关事件事件名称 说明 dragstart 在元素开始被拖动时候触发 drag 在元素被拖动时反复触发 dragend 在拖动操作完成时触发 2、容器的相关事件事件名称 说明...dragleave 当被拖动元素没有放下就离开目的地元素时触发 3、释放事件事件名称 说明 drop 当被拖动元素在目的地元素里放下时触发,一般需要取消浏览器的默认行为。...请前往 Github 仓库 下载 demo.html 和 demo.js 到本地,然后用 Chrome 打开 html 文件,初始效果如下图: ?...代码实现 首先,先编写 html 代码。因为元素可以在两个容器之间任意拖动,因此这两个容器都需要监听 drapenter、dragover、dragleave、drop 这四个事件

1.1K20

H5拖放原生js将图片拖放另外一个元素里

HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2:元素的可拖放 draggable 属性设置为 true 3:元素中的拖放事件 通过拖放事件...其中最关键的地方在于确定那里发生了拖放事件,有些事件是在被拖动的元素上触发的,而有些事件是在放置目标上触发的。...触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。 当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。...ondragenter、ondragover、ondragleave、ondrop 只要元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。...如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。 如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件

2K30

HTML5 drag和drop的亲手实践

首先,先放一个我的demo,大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html 知识储备 与drag和drog有关的属性和事件...ondragleave: 当被拖动元素离开悬挂元素时,触发事件。目标对象是被拖动元素悬挂的那个元素。 ondrop: 当鼠标松开被拖动元素的时候,触发事件。目标对象是被拖动元素悬挂的那个元素。...ondragend: 当鼠标松开被拖动元素的时候,触发事件。目标对象是被拖动的元素。其中,ondrop事件会先于ondragend事件触发。...event.preventDefault: 当触发ondragover事件的时候,必须使用event.preventDefault(),否则的话,ondrop事件就不会触发 event.dataTransfer.effectAllowed...当ondragleave事件触发的时候,则把dotted类从目标对象移除。 // 当被拖动元素在悬挂元素上移动的时候,该事件触发。目标对象是被拖动元素悬挂的那个元素。

93630

HTML5 拖放

拖放是HTML5 标准中的一部分,任何标签元素都能够被拖放。 二、为什么需要拖放?...之前,我们要想实现针对页面中的标签元素的 移动和拖放,没有一个统一的操作标准,一般都是监听鼠标点击事件、鼠标移动事件然后配合 DOM对标签元素的操作 来实现 三、HTML5 拖放(Drag 和 drop...不必去了解为什么这样,因为就是这样设计的: 1、设置元素为可拖放 为了使某个元素可拖动,我们给他添加 draggable 属性,并且把 draggable 属性设置为 true : <img draggable...) 当我们松开鼠标后,表示我们要放置被拖动的数据,这时会发生 drop 事件,我们要规定被拖动的元素需要放置的新位置,这里给div容器添加 ondrop 事件,如下代码: #div1, #div2 {float:left; width:198px

1.5K20

前端拾零02—H5原生拖放总结 【原创】

拖放元素 2.1 拖放元素属性 draggable: 设置元素可被拖放 2.2 拖放元素监听事件 ondragstart: 拖放开始时触发事件,作用于拖放元素 ondrag: 拖放期间连续触发事件,作用于拖放元素...ondragend: 拖放完成时触发事件,作用于拖放元素 2.3 demo <img id="dragData" width="100" title="拖放对象" src="http://www.csxiaoyao.com...目标元素 3.1 目标元素监听<em>事件</em> ondragenter: 拖放元素进入目标元素时<em>触发</em><em>事件</em>,作用于目标元素 ondragover: 拖放元素在目标元素上移动时<em>触发</em><em>事件</em>,作用于目标元素 <em>ondrop</em>:...拖放元素在目标元素上放置时<em>触发</em><em>事件</em>,作用于目标元素 ondragleave: 拖放元素离开目标元素时<em>触发</em><em>事件</em>,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...Event.preventDefault() Event.preventDefault(): 阻止默认<em>事件</em>方法执行,ondragover中一定要执行preventDefault(),否则<em>ondrop</em><em>事件</em>不会被<em>触发</em>

1.9K20

前端拾零02—H5拖放总结

拖放元素 2.1 拖放元素属性 draggable: 设置元素可被拖放 2.2 拖放元素监听事件 ondragstart: 拖放开始时触发事件,作用于拖放元素 ondrag: 拖放期间连续触发事件,作用于拖放元素...ondragend: 拖放完成时触发事件,作用于拖放元素 2.3 demo <img id="dragData" width="100" title="拖放对象" src="http://www.csxiaoyao.com...目标元素 3.1 目标元素监听<em>事件</em> ondragenter: 拖放元素进入目标元素时<em>触发</em><em>事件</em>,作用于目标元素 ondragover: 拖放元素在目标元素上移动时<em>触发</em><em>事件</em>,作用于目标元素 <em>ondrop</em>:...拖放元素在目标元素上放置时<em>触发</em><em>事件</em>,作用于目标元素 ondragleave: 拖放元素离开目标元素时<em>触发</em><em>事件</em>,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...Event.preventDefault() Event.preventDefault(): 阻止默认<em>事件</em>方法执行,ondragover中一定要执行preventDefault(),否则<em>ondrop</em><em>事件</em>不会被<em>触发</em>

4.2K730

HTML5拖拽

@(HTML5)[HTML 5拖拽] HTML 5 拖拽事件 图片自带拖拽功能 其他元素可设置draggable属性:draggable :true 拖拽元素(被拖拽的元素)事件 : ondragstart...: 拖拽的一瞬间触发 ondrag : 拖拽前、拖拽结束之间,连续触发 ondragend : 拖拽结束触发 目标元素(拖拽元素被拖到的地方)事件 : ondragenter...: 进入目标元素触发 ondragover : 进入目标、离开目标之间,连续触发 ondragleave : 离开目标元素触发 ondrop :在目标元素上释放鼠标触发 默认状态下,...一个元素不能放另一元素的上面,需要在ondragover事件里面阻止默认事件 IE没效果 生命周期: dragstart -> drag -> dragenter -> dragover -> dragleave...filesList列表 filesList下有个type属性,返回文件的类型 FileReader(读取文件信息) readAsDataURL 参数为要读取的文件对象 onload当读取文件成功完成的时候触发事件

3.8K10

前端文件上传功能实现原理

HTML5实现拖放功能 有两个核心元素拖拽元素和放置目标元素,通过这两个元素的触发事件来实现拖放功能。...事件:当拖曳元素进入目标元素的时候触发事件,此事件作用在目标元素上 ondragover 事件:拖拽元素在目标元素上移动的时候触发事件,此事件作用在目标元素上 ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发事件...在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。...紧随其后的是 dragover 事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发事件。...如果元素被放到了放置目标中,则会触发 drop 事件而不是 dragleave 事件

12610

HTML5 - 拖放

使用 preventDefault() 取消事件的默认动作 拖放事件 拖动元素-事件事件 描述 ondragstart 当元素开始被拖动时触发——开始拖动 ondrag 拖动源触发——正在拖动...ondragend 拖动源在拖动操作结束将得到dragend对象(不管成功与否)——拖动结束 注意:ondrag事件在拖动元素时一直触发,在后面的例子你会看到。...放置元素-事件事件 描述 ondragenter 当拖动中鼠标第一次进入一个元素时触发 ondragover 当拖动中的鼠标移动经过一个元素时触发 ondragleave 当拖动中的鼠标离开元素时触发...ondrop 当拖动操作结束并释放于释放元素上触发 注意:只有在拖拽时触发相关事件,鼠标事件是不会触发的。...= function (){ console.log('开始拖动') } // 正在拖动 demo.ondrag = function (){ console.log('正在拖动(此事件一直触发

1.5K10

前端day16-JS(WebApi)学习笔记(事件补充、事件冒泡与捕获)

鼠标移动时,元素在我的范围内就会触发(非常频繁) ondrop: 鼠标松开时,元素还在我的范围内就会触发 * 注意点:这个事件默认不会触发,需要配合ondragover使用 <!...console.log('鼠标移动时,元素在我的范围内'); }; //4.ondrop //这个事件默认不会触发,需要配合ondragover使用...元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!...1.事件冒泡:从触发事件元素,一级一级往上找父元素触发同名事件,如果有就触发 2.事件捕获:从最顶级的父元素一级一级往下找子元素触发同名事件,直到触发事件的元素为止 事件捕获与事件冒泡触发事件的顺序完全相反....事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获 5.IE8及以前没有捕获!

1.7K00

轻松实现多图片上传:选择文件夹与拖拽上传区域全攻略

事件 定义和用法: 当被拖动的元素或选取的文本被放置在目标区域时,会触发 ondrop 事件。...触发条件: 在拖放操作中,当拖动的元素或文本被释放到目标区域时,就会触发 ondrop 事件。 相关事件: 在拖放过程中,还会涉及其他相关事件,如: ondragstart:在拖动开始时触发。...ondrag:在拖动过程中持续触发。 ondragend:在拖动结束时触发。 ondragenter:当拖动元素进入目标区域时触发。...ondragover:当拖动元素在目标区域上移动时触发,为了使 ondrop 事件能够正常触发,通常需要在 ondragover 事件处理程序中调用 event.preventDefault() 来阻止浏览器的默认行为...DOCTYPE html> <!

9210
领券