Html5拖放的实现方法

2020-03-24 16:11:59

字体：大中小

来源：转载

供稿：网友

今天写一下html5的拖放问题。

设置元素可以拖放

设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素触发

ondrop：在目标元素释放鼠标触发

事件的执行顺序

1、drop不触发的时候

dragstart drag dragenter dragover dragleave dragend

2、drop触发的时候（dragover的时候阻止默认事件）

dragstart drag dragenter dragover drop dragend

解决火狐下的问题

必须设置 dataTransfer对象才可以拖拽图片外的其他标签

setData（）：设置数据key和value（必须是字符串）

getData（）：获取数据，根据key值，获取相应的value

offctAllowed：设置光标样式

setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

!DOCTYPE html html head meta charset= UTF-8 title /title style type= text/css div{ width: 200px; height: 200px; background: red; } /style /head body div draggable= true /div script type= text/javascript //获取元素 var oDiv = document.querySelector( div //开始拖拽时元素变为绿色 oDiv.ondragstart = function(){ console.log( 开始拖拽时触发 ) oDiv.style.background = green } //拖拽结束变为红色 oDiv.ondragend = function(){ console.log( 拖拽结束触发 oDiv.style.background = red } oDiv.ondrag = function(){ console.log( 拖拽时连续触发 } /script /body /html

目标元素事件具体代码：

!DOCTYPE html html head meta charset= UTF-8 title /title style type= text/css #div1{ width: 100px; height: 100px; background: red; } #div2{ width: 200px; height: 200px; border: solid 1px; } /style /head body div id= div1 draggable= true /div div id= div2 /div script type= text/javascript //获取元素 var oDiv1 = document.querySelector( #div1 var oDiv2 = document.querySelector( #div2 //目标元素事件 oDiv2.ondragenter = function(){ console.log( 移入目标元素触发 ) oDiv2.style.borderColor = blue } oDiv2.ondragleave = function(){ console.log( 移除目标元素触发 ) oDiv2.style.borderColor = black } oDiv2.ondragover = function(ev){ console.log( 移入到目标元素后连续触发 var event = window.event || ev; //阻止默认事件 event.preventDefault() } //要想触发ondrop事件，必须在ondragover事件中阻止默认事件 oDiv2.ondrop = function(){ console.log( 在目标元素中释放拖放元素触发 ) oDiv2.appendChild(oDiv1) } /script /body /html

解决火狐浏览器的拖放问题具体代码：

!DOCTYPE html html head meta charset= UTF-8 title /title style type= text/css li{ list-style: none; width: 100px; height: 40px; margin-top: 10px; background: orange; } div{ width: 200px; height: 200px; background: red; margin: 0 auto; } /style /head body ul li draggable= true 1 /li li draggable= true 2 /li li draggable= true 3 /li /ul div /div script type= text/javascript var aLi = document.querySelectorAll( li //目标元素事件 var oDiv = document.querySelector( div //拖放元素事件 //解决火狐浏览器拖放问题:在开始拖放时设置setData()方法 for(var i=0;i aLi.length;i++){ //添加属性，存储下标 aLi[i].index = i; aLi[i].ondragstart = function(ev){ var event = window.event || ev; event.dataTransfer.setData( test ,this.index+1) //设置光标样式 event.dataTransfer.effectAllowed = uninitialized //设置拖拽样式 event.dataTransfer.setDragImage(oDiv,100,100) } } oDiv.ondragover = function(ev){ var event = window.event || ev; event.preventDefault(); } //释放元素时弹框 oDiv.ondrop = function(ev){ var event = window.event || ev; var value = event.dataTransfer.getData( test , 张三 ) alert(value) } /script /body /html

以上就是Html5拖放的实现方法的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html5中audio支持音频格式的解决方法

下一篇：Html5如何实现文件异步上传功能的实例分析