今天写一下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/java script"> |
| |
//获取元素 |
| |
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/java script"> |
| |
//获取元素 |
| |
var oDiv1 = document.querySelector("#div1"); |
| |
var oDiv2 = document.querySelector("#div2"); |
| |
|
| |
//目标元素事件 |
| |
oDiv2.ondragenter = function(){ |
| |
console.log('移入目标元素触发') |
| |
oDiv2.style.borderColor = 'blue' |
| |