开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ondragover、ondragstart和ondrop

是HTML5中的三个事件属性，用于实现拖放功能。

ondragover事件属性：当被拖动的元素正在被拖动到一个可放置的目标区域时触发。可以使用该事件属性来控制拖放操作的行为。常用于阻止默认的拖放行为或者改变拖放元素的样式。
ondragstart事件属性：当元素开始被拖动时触发。可以使用该事件属性来设置拖动操作的数据类型和数据。常用于设置拖动元素的数据传输。
ondrop事件属性：当拖动元素被放置到一个可放置的目标区域时触发。可以使用该事件属性来处理拖放操作的结果。常用于接收拖放元素的数据并进行相应的处理。

这些事件属性通常与其他事件属性和方法一起使用，以实现完整的拖放功能。在前端开发中，拖放功能常用于实现图像上传、文件拖拽排序等交互效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云对象存储（COS）：用于存储和管理大规模的非结构化数据，支持图片、音视频、文档等多种类型的文件存储。链接地址：https://cloud.tencent.com/product/cos
腾讯云云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足不同规模和业务需求。链接地址：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：无服务器计算服务，支持事件驱动的函数计算，可实现按需运行、弹性扩缩容的应用架构。链接地址：https://cloud.tencent.com/product/scf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5-拖拽

图片和超链接默认就可以拖拽--> 试着把我拖过去试着也把我拖过去...(e){ //console.log("ondragover"); /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault...(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ div2.ondrop=function(){ console.log...("ondragover"); /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); }...浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document.ondrop=function(e){ /*添加元素*/

9042 0

三天学会HTML5 ——多媒体元素的使用

注意：要确保video 和html 文件存放到同一目录下。如果想放置在不同的目录下，需要设置src 属性。...drog 操作输出： ?...="drop(event)" ondragover="allowDrop(event)"> ... <td id="smile" ondrop="drop(event)" ondragover="allowDrop(event)" colspan

2.2K9 0

HTML5 拖放

一、什么是拖放（Drag 和 drop）？拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。...9+、Firefox、Opera、Chrome 和 Safari 都支持拖动。...和 setData()）设置当元素被拖动时，要拖动的内容是什么；这里需要给要拖动的元素添加 ondragstart事件（当元素开始用鼠标拖动时，会执行这里设置的函数），然后我们需要在事件的回调中设置拖动的内容...我们要规定被拖动的元素需要放置的新位置，这里给div容器添加 ondrop 事件，如下代码： <div id="div2" ondrop="drop(event

1.5K2 0

从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

目标拖拽事件： ondragenter：应用于目标元素，当拖拽元素进入时调用； ondragover：应用于目标元素，当停留在目标元素上时调用； ondrop：应用于目标元素，当在目标元素上松开鼠标时调用...=function(e){ console.log("ondragover"); /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/...e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ div2.ondrop=function...遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。...*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/ document.ondrop=function(e){ /*添加元素*/

1.5K2 0

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

H5拖放分为两部分：拖放元素和目标元素，分别有不同的属性和监听事件 2....目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件，作用于目标元素 ondragover: 拖放元素在目标元素上移动时触发事件，作用于目标元素 ondrop:...="div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave=...Event.preventDefault() Event.preventDefault(): 阻止默认事件方法执行，ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发...此时需要用用document的ondragover事件覆盖 5.

1.9K2 0

前端拾零02—H5拖放总结

H5拖放分为两部分：拖放元素和目标元素，分别有不同的属性和监听事件 2....目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件，作用于目标元素 ondragover: 拖放元素在目标元素上移动时触发事件，作用于目标元素 ondrop:...div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave...Event.preventDefault() Event.preventDefault(): 阻止默认事件方法执行，ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发...此时需要用用document的ondragover事件覆盖 5.

4.2K73 0

JavaScript 学习-50.实现页面菜单拖放（Drag 和 Drop）

拖放的内容 - ondragstart 和 setData() 然后，规定当元素被拖动时发生的事情。...在上面的例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。...拖到何处 - ondragover ondragover 事件规定被拖动的数据能够被放置到何处。默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。...这个任务由 ondragover 事件的 event.preventDefault() 方法完成： event.preventDefault() 进行放置 - ondrop 当放开被拖数据时，会发生 drop...console.log('源对象悬停在目标元素上方时'); return false; }; //当源对象在目标元素上方释放鼠标时 document.ondrop

1.2K2 0

HTML5 drag和drop的亲手实践

首先，先放一个我的demo，大家可以去那里随便拖动一下玩一玩: https://chenjigeng.github.io/example/drag.html 知识储备与drag和drog有关的属性和事件...其中，ondrop事件会先于ondragend事件触发。...event.preventDefault: 当触发ondragover事件的时候，必须使用event.preventDefault(),否则的话，ondrop事件就不会触发 event.dataTransfer.effectAllowed...2.为每个div都设置一个ondragstart函数，当该函数触发的时候，进行初始化操作，比如记录当前的目标对象，拖动目标的y值，以及设置拖动的效果。...事件和ondragleave事件，在ondragover事件里，主要是调用event.preventDefault来防止ondrog不会被触发，并且为了看起来更明显，当ondragover事件触发的时候

9443 0

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

拖动某些元素时，将一次触发下列事件：ondragstart、ondrag、ondragend。按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。...ondragenter、ondragover、ondragleave、ondrop 只要元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。...dataTransfer对象有两个主要方法： getData()和setData()。（ps：这两个值也是通过监听得来的） getData()可以取得由setData()保存的值。...("text","some text"); var text = event.dataTransfer.getData("text"); //设置和接收URLevent.dataTransfer.setData...6：简单拖放常用事件与方法 ondragstart ondragover ondrop dataTransfer.getData( )/setData( ) event.preventDefault(

2K3 0

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

专注前端与算法的系列干货分享，转载请声明出处：原文链接: xxoo521.com 拖放事件介绍由名字可以看出来，拖放事件由 2 部分组成：拖动和释放。...而拖动又由 2 部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。...="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)" >... 被拖拽元素 div>...onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)" >div>

1.2K2 0

H5在网页中拖放图片

H5中实现拖放效果，常用的实现方法是利用事件drag和drop; 1.设置元素为可拖放。... 2.第二步：拖动什么实现拖放的第二步就是设置拖动的元素，常见的元素有图片，文字，动画，实现拖放功能的是 ondragstart和setData()，即规定当元素被拖动时...dataTransfer.setData()方法设置被拖放数据的类型和值。...这就需要通过调用ondragover事件的event.preventDefault()方法。...event.prenventDefault() 第4步：进行放置当放置被拖放数据时，就会发生drop事件，在上面的例子中，ondrop属性调用了一个函数，drop(event)，具体代码如下。

5953 0

基于h5+ angularjs页面拖拽实现

和 setData() 然后，规定当元素被拖动时，会发生什么。...在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。...放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。...这要通过调用 ondragover 事件的 event.preventDefault() 方法： event.preventDefault() 进行放置 - ondrop 当放置被拖数据时，会发生...我只是一张图片只需要如下一丁点代码就可以实现： <div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)"

1.5K2 0

JavaScript进阶之实现拖拽

注意 ball.ondragstart = function() { return false; }; 如果不设置这段代码，会发生奇怪的现象，这是因为浏览器有自己的对图片和一些其他元素的拖放处理，...在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型） ?...，此事件作用在目标元素上 ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上...在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。...ondragend="dragEnd()" ondragover="dragOver(event)" ondragstart="dragStart(event

2.7K4 0

HTML5 的拖放（实例：两个div之间拖放图片）

重点解释：首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ： dataTransfer.setData() 方法设置被拖数据的数据类型和值： ondragover...这要通过调用 ondragover 事件的 event.preventDefault() 方法：当放置被拖数据时，会发生 drop 事件。...document.getElementById(data)); }

2.2K1 0

HTML5 - 拖放

使用 preventDefault() 取消事件的默认动作拖放事件拖动元素-事件：事件描述 ondragstart 当元素开始被拖动时触发——开始拖动 ondrag 拖动源触发——正在拖动...ondrop 当拖动操作结束并释放于释放元素上触发注意：只有在拖拽时触发相关事件，鼠标事件是不会触发的。...dataTransfer对象属性/方法描述 files 其属性返回和放置相关的所有文件 types 属性使用数组的形式返回当前注册的格式 effectAllowed 此属性通知浏览器当前可被用户选用的操作...true" id="demo"> // 获取元素DOM var demo = document.querySelector('#demo') // 开始拖动 demo.ondragstart...放置 .element DOM节点(放下) container.ondrop = function (e){ // 获取 dataTransfer对象数据 var id = e.dataTransfer.getData

1.5K1 0

JS实现div块的拖放，调换位置

主要是HTML5 的拖放（Drag 和 Drop）例子（不需要对div设置ID）： div3 上面函数介绍： ondrop...: 当放置被拖数据时，会发生 drop 事件，这里自定义drop(event,this)函数,互换两个的innerHTML ondragover:当拖动链接等有默认事件的元素时，要在ondragover...ondragstart:规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。...dataTransfer.setData() 方法设置被拖数据的数据类型和值。

6.7K2 0

HTML5拖拽

@(HTML5)[HTML 5拖拽] HTML 5 拖拽事件图片自带拖拽功能其他元素可设置draggable属性：draggable ：true 拖拽元素(被拖拽的元素)事件 : ondragstart...ondrag : 拖拽前、拖拽结束之间，连续触发 ondragend : 拖拽结束触发目标元素(拖拽元素被拖到的地方)事件 : ondragenter : 进入目标元素触发 ondragover...: 进入目标、离开目标之间，连续触发 ondragleave : 离开目标元素触发 ondrop :在目标元素上释放鼠标触发默认状态下，一个元素不能放另一元素的上面，需要在ondragover...drop -> dragend 火狐下的兼容火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签 dataTransfer对象 setData() : 设置数据 key和value...key值，获取对应的value effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和

3.8K1 0

H5新特性拖拽更换图片

i++) { // 存储每个id var p = planeList[i]; // 事件源拖动开始 p.ondragstart...拖动目标对象,鼠标进入目标对象 chosen.ondragenter = function (e) { }; // 悬停于目标对象上方 chosen.ondragover...// 鼠标离开目标对象 chosen.ondragleave = function (e) { }; // 鼠标在目标对象上释放 chosen.ondrop...// 鼠标进入目标对象 list.ondragenter = function (e) { }; // 鼠标在目标对象上释放 list.ondragover...// 鼠标离开目标对象 list.ondragleave = function (e) { }; // 鼠标在目标对象上释放 list.ondrop

7051 0

前端学习(4)~html5详解(二)

如上图所示，我们可以拖拽博客园网站里的图片和超链接。...拖拽元素的事件监听：（应用于拖拽元素） ondragstart当拖拽开始时调用 ondragleave 当鼠标离开拖拽元素时调用 ondragend 当拖拽结束时调用 ondrag...ondrop 当在目标元素上松开鼠标时调用 ondragleave 当鼠标离开目标元素时调用 <!...如果没有这个方法，后面ondrop()方法无法触发。如下图所示： ?...总结：如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。案例：拖拽练习完整版代码： <!

7120 0

HMTL5新增Api

:源对象开始被拖动 ondrag:源对象在拖动过程中 ondragend:源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件 ondragenter:目标对象被源对象拖动着进入 ondragover...:目标对象被源对象拖动着悬停在上方 ondragleave:源对象拖动着离开了目标对象 ondrop:源对象拖动着在目标对象上释放案例 html结构 ...="true">four js document.ondragstart...document.ondragenter = function(){ console.log('源对象拖动进入目标对象') } document.ondragover...document.ondragleave = function(){e console.log('源对象从目标对象离开') } document.ondrop

4731 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭