时间:2021-07-01 10:21:17 帮助过:36人阅读
设置元素可以拖放
设置元素可以拖放用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拖放的实现方法的详细内容,更多请关注Gxl网其它相关文章!