本文详细介绍了HTML5中的拖放功能，包括拖放事件的使用，如dragstart、drag、dragend、dragenter、dragover、dragleave和drop等，并展示了如何在不同元素间进行拖放操作。通过示例代码解释了如何处理拖放过程中的数据传输，以及在Firefox中可能遇到的问题和解决方案。此外，还探讨了dataTransfer对象的功能，如setData、getData、effectAllowed和setDragImage等，以及如何利用FileReader读取和预览拖放的文件。
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
•
最低0.47元/天 解锁文章
扫一扫
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
