HTML5之拖放
来源：互联网 发布：网络推广部门制度 编辑：程序博客网 时间：2024/05/01 15:22
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].ondragstart= function(){
this.style.background= 'green';
};
/*aLi[i].ondrag= function(){ //开始与结束连续触发
document.title= i++;
};*/
aLi[i].ondragend= function(){
this.style.background= 'yellow';
};
}
oDiv.ondragenter= function(){
this.style.background= 'blue';
};
oDiv.ondragover= function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//鼠标从禁止，变成箭头
//document.title= i++;
ev.preventDefault();
};
oDiv.ondragleave= function(){
this.style.background= 'red';
};
oDiv.ondrop= 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
• 解决火狐下的问题
– 必须设置dataTransfer对象才可以拖拽除图片外的其他标签
l Event对象下dataTransfer对象
• setData() :设置数据 key和value(必须是字符串)
• getData() :获取数据，根据key值，获取对应的value
– 拖拽删除列表
<!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 oUl =document.getElementsByTagName('ul')[0];
var aLi =oUl.getElementsByTagName('li');
var oDiv =document.getElementById('div1');
var i = 0;
for(vari=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].ondragstart= function(ev){
varev = ev || window.event;
//ev.dataTransfer.setData('name','hello');
ev.dataTransfer.setData('name',this.index);
this.style.background= 'green';
};
/*aLi[i].ondrag= function(){ //开始与结束连续触发
document.title= i++;
};*/
aLi[i].ondragend= function(){
this.style.background= 'yellow';
};
}
oDiv.ondragenter= function(){
this.style.background= 'blue';
};
oDiv.ondragover= function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title= i++;
ev.preventDefault();
};
oDiv.ondragleave= function(){
this.style.background= 'red';
};
oDiv.ondrop= function(ev){
//alert(123);
//alert(ev.dataTransfer.getData('name') );
//删除拖动的LI
oUl.removeChild(aLi[ev.dataTransfer.getData('name')] );
for(vari=0;i<aLi.length;i++){//位置防止remove后位置改变
aLi[i].index= i;
}
};
};
</script>
</head>
<body>
<ul>
<lidraggable="true">a</li>
<lidraggable="true">b</li>
<lidraggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
l dataTransfer对象_2
• effectAllowed
– effectAllowed :设置光标样式(none, copy, copyLink, copyMove, link,linkMove, move, all和 uninitialized)
• setDragImage设置当前图片的样式
• 拖拽指定的元素
– 三个参数：指定的元素，坐标X，坐标Y
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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(){
varoUl = document.getElementsByTagName('ul')[0];
varaLi = oUl.getElementsByTagName('li');
varoDiv = document.getElementById('div1');
varoImg = document.getElementById('img1');
vari = 0;
for(vari=0;i<aLi.length;i++){
aLi[i].ondragstart= function(ev){
varev = ev || window.event;
ev.dataTransfer.setData('name','hello');
ev.dataTransfer.effectAllowed= 'link';
ev.dataTransfer.setDragImage(oImg,0,0);
};
aLi[i].ondragend= function(){
this.style.background= 'yellow';
};
}
oDiv.ondragenter= function(){
this.style.background= 'blue';
};
oDiv.ondragover= function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title= i++;
ev.preventDefault();
};
oDiv.ondragleave= function(){
this.style.background= 'red';
};
oDiv.ondrop= function(ev){
};
};
</script>
</head>
<body>
<ul>
<lidraggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
//可以让拖放的图片不显示
<img src="miaov.png"id="img1" style="display:none" />
</body>
</html>
• files
– 获取外部拖拽的文件，返回一个filesList列表
– filesList下有个type属性，返回文件的类型
l FileReader(读取文件信息)
• readAsDataURL
– 参数为要读取的文件对象，将文件读取为DataUrl
• onload
– 当读取文件成功完成的时候触发此事件
– this. result ,来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px;background:red; margin:100px;}
</style>
<script>
window.onload = function(){
varoDiv = document.getElementById('div1');
oDiv.ondragenter= function(){
this.innerHTML= '可以释放啦';
};
oDiv.ondragover= function(ev){
ev.preventDefault();
};
oDiv.ondragleave= function(){
this.innerHTML= '将文件拖拽到此区域';
};
oDiv.ondrop= function(ev){
ev.preventDefault();//默认会自动执行打开图片
var fs =ev.dataTransfer.files;//外部文件的集合
//alert(fs.length);
//alert(fs[0].type );
varfd = new FileReader();//创建文件对象
fd.readAsDataURL(fs[0] );//读取文件信息
fd.onload= function(){
alert(this.result );//图片的一些信息
};
};
};
</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
</body>
</html>
• 实例
– 上传图片预览功能
<!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>
#div1{ width:200px; height:200px; background:red;margin:100px;}
</style>
<script>
window.onload = function(){
var oDiv =document.getElementById('div1');
var oUl =document.getElementById('ul1');
oDiv.ondragenter= function(){
this.innerHTML= '可以释放啦';
};
oDiv.ondragover= function(ev){
ev.preventDefault();
};
oDiv.ondragleave= function(){
this.innerHTML= '将文件拖拽到此区域';
};
oDiv.ondrop= function(ev){
ev.preventDefault();
varfs = ev.dataTransfer.files;
//上传一张图片的格式
//alert(fs.length);
//alert(fs[0].type );
/*if(fs[0].type.indexOf('image')!=-1){
varfd = new FileReader();
fd.readAsDataURL(fs[0] );
fd.onload= function(){
varoLi = document.createElement('li');
varoImg = document.createElement('img');
oImg.src= this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
};
}
else{
alert('亲，请上传图片类型');
}*/
//同时上传多张图片的格式
for(vari=0;i<fs.length;i++){
if(fs[i].type.indexOf('image')!=-1){
varfd = new FileReader();
fd.readAsDataURL(fs[i] );
fd.onload= function(){
varoLi = document.createElement('li');
varoImg = document.createElement('img');
oImg.src= this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
};
}
else{
alert('亲，请上传图片类型');
}
}
};
};
</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>
– 拖拽购物车
<!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>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid;margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid;height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
<script>
window.onload = function(){
var aLi =document.getElementsByTagName('li');
var oDiv =document.getElementById('div1');
var obj ={};
var iNum =0;
varallMoney = null;
for(vari=0;i<aLi.length;i++){
aLi[i].ondragstart= function(ev){
varaP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);
};
}
oDiv.ondragover= function(ev){
ev.preventDefault();
};
oDiv.ondrop= function(ev){
ev.preventDefault();
varsTitle = ev.dataTransfer.getData('title');
varsMoney = ev.dataTransfer.getData('money');
if(!obj[sTitle] ){
varoP = document.createElement('p');
varoSpan = document.createElement('span');
oSpan.className= 'box1';
oSpan.innerHTML= 1;
oP.appendChild(oSpan );
varoSpan = document.createElement('span');
oSpan.className= 'box2';
oSpan.innerHTML= sTitle;
oP.appendChild(oSpan );
varoSpan = document.createElement('span');
oSpan.className= 'box3';
oSpan.innerHTML= sMoney;
oP.appendChild(oSpan );
oDiv.appendChild(oP );
obj[sTitle]= 1;
}
else{
varbox1 = document.getElementsByClassName('box1');
varbox2 = document.getElementsByClassName('box2');
for(vari=0;i<box2.length;i++){
if(box2[i].innerHTML== sTitle){
box1[i].innerHTML= parseInt(box1[i].innerHTML) + 1;
}
}
}
if(!allMoney){
allMoney= document.createElement('div');
allMoney.id= 'allMoney';
}
iNum+= parseInt(sMoney);
allMoney.innerHTML= iNum + '￥';
oDiv.appendChild(allMoney );
};
};
</script>
</head>
<body>
<ul>
<lidraggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<lidraggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<lidraggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<lidraggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</li>
</ul>
<div id="div1">
<!--<p>
<spanclass="box1">1</span>
<spanclass="box2">DOM编程艺术</span>
<spanclass="box3">45￥</span>
</p>
<p>
<spanclass="box1">1</span>
<spanclass="box2">DOM编程艺术</span>
<spanclass="box3">45￥</span>
</p>
<divid="allMoney">90￥</div>-->
</div>
</body>
</html>
- HTML5之拖放功能
- html5之拖放
- html5之拖放
- HTML5之拖放
- HTML5之拖放
- HTML5之拖放
- HTML5之拖放
- Html5之图片拖放上传
- html5之拖放简单效果
- HTML5学习笔记之拖放
- HTML5之拖放属性实现图片的拖放
- HTML5之拖放功能(多文件上传和元素拖放)
- html5拖放
- HTML5 拖放
- HTML5拖放
- HTML5拖放
- HTML5拖放
- html5拖放
- 一个基于MINA框架应用的最简单例子
- JavaWeb开发之深入分析URL重定向的原理和特点(跟着龙哥学JavaWeb)
- <<web>>css背景需要对应面积
- Fuck you money
- 继续(3n+1)猜想
- HTML5之拖放
- Python 装饰器，@property 以及 Pycaffe.py
- Android更新机制（自己服务器和GooglePlay更新）
- 多次读取reduce函数中迭代器的数据
- 从View开始研究FrameWork层的源码
- iOS核心动画－关键帧动画CAKeyframeAnimation
- 2、学会常量后能够编程的例子（自我介绍）
- Log最佳工具类
- ColorFilter
