本文主要是介绍HTML5之拖放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5之拖放
l 拖放事件
• draggable ：
– 设置为true，元素就可以拖拽了
• 拖拽元素事件 : 事件对象为被拖拽元素
– dragstart , 拖拽前触发
– drag ,拖拽前、拖拽结束之间，连续触发
– Move的区别，move移动才触发，drag在开始到结束时（鼠标抬起）一直触发，不管移动
– dragend , 拖拽结束触发
• 目标元素事件 : 事件对象为目标元素
– dragenter , 进入目标元素触发，相当于mouseover
– 子级不会影响父级
– dragover ,进入目标、离开目标之间，连续触发
– dragleave , 离开目标元素触发，相当于mouseout
– drop , 在目标元素上释放鼠标触发
– 要想触发drop事件，就必须在dragover当中阻止默认事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px;background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red;margin:200px;}
</style>
<script>
window.onload = function(){
var aLi =document.getElementsByTagName('li');
var oDiv =document.getElementById('div1');
var i = 0;
for(vari=0;i<aLi.length;i++){
aLi[i].οndragstart= function(){
this.style.background= 'green';
};
/*aLi[i].οndrag= function(){ //开始与结束连续触发
document.title= i++;
};*/
aLi[i].οndragend= function(){
this.style.background= 'yellow';
};
}
oDiv.οndragenter= function(){
this.style.background= 'blue';
};
oDiv.οndragοver= function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//鼠标从禁止，变成箭头
//document.title= i++;
ev.preventDefault();
};
oDiv.οndragleave= function(){
this.style.background= 'red';
};
oDiv.οndrοp= function(){
alert(123);
};
};
</script>
</head>
<body>
<ul>
<lidraggable="true">a</li>
<lidraggable="true">b</li>
<lidraggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
l 拖放事件_2
• 事件的执行顺序：drop不触发的时候
– dragstart > drag > dragenter > dragover > dragleave > dragend
• 事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)
– dragstart > drag > dragenter > dragover > drop > dragend
• 不能释放的光标和能释放的光标不一样
• 不能释放的为禁止符号
• 能释放的为箭头符号
l 拖放事件_3
•
这篇关于HTML5之拖放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
