h5-3
2016-04-06 13:09
453 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(){//开始拖拽
this.style.background = 'green';
};
aLi[i].ondrag = function(){ //开始与结束之间触发，拖拽时停止时也触发，不同于move。
document.title = i++;
};
aLi[i].ondragend = function(){//结束拖拽
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){//拖拽的目标控件被进入目标控件时。
this.style.background = 'blue';
};
oDiv.ondragover = function(ev){
//进入和离开目标控件之间连续触发
//要想触发drop事件（在目标元素上释放鼠标触发），就 必须在dragover当中阻止默认事件
document.title = i++;
ev.preventDefault();
};
oDiv.ondragleave = function(){//拖拽的目标控件被离开目标控件时。
this.style.background = 'red';
};
oDiv.ondrop = function(){//在目标元素上释放鼠标触发
alert(123);
};
};
</script>
</head>
<body>
<ul>
<li draggable="true">a</li> //可以拖拽，发邮箱时拖拽。
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
var ev = 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') );
oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
}
};
};
</script>
</head>
<body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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 oImg = document.getElementById('img1');
var i = 0;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var ev = ev || window.event;
ev.dataTransfer.setData('name','hello');//设置数据
ev.dataTransfer.effectAllowed = 'link'; //设置拖拽时鼠标样式
ev.dataTransfer.setDragImage(oImg,100,20);//设置推拽的时候是一个图片样式，并且鼠标指针在100，20位置
};
aLi[i].ondragend = function(){
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){
this.style.background = 'yellow';
};
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>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1"/>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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');
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 );//拖一个文件就是第0个
var fd = new FileReader();
fd.readAsDataURL( fs[0] );//读取文件
fd.onload = function(){//读取成功触发onload事件
alert( this.result );
};
};
};
</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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();
var fs = ev.dataTransfer.files;//多个图片
alert(fs.length);
alert( fs[0].type );
/*if(fs[0].type.indexOf('image')!=-1){
var fd = new FileReader();
fd.readAsDataURL( fs[0] );
fd.onload = function(){
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
};
}
else{
alert('亲，请上传图片类型');
}*/
for(var i=0;i<fs.length;i++){
if(fs[i].type.indexOf('image')!=-1){
var fd = new FileReader();
fd.readAsDataURL( fs[i] );
fd.onload = function(){
var oLi = document.createElement('li');
var oImg = 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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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;
var allMoney = null;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var aP = this.getElementsByTagName('p');//数组
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);//this是这个li
};
}
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money');
if( !obj[sTitle] ){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = sTitle;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = sMoney;
oP.appendChild( oSpan );
oDiv.appendChild( oP );
obj[sTitle] = 1;
}
else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for(var i=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>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</li>
</ul>
<div id="div1">
<!--<p>
<span class="box1">1</span>
<span class="box2">DOM编程艺术</span>
<span class="box3">45￥</span>
</p>
<p>
<span class="box1">1</span>
<span class="box2">DOM编程艺术</span>
<span class="box3">45￥</span>
</p>
<div id="allMoney">90￥</div>-->
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML4 和 HTML5 的10个关键区别
- H5 localStorge
- HTML5 文件操作API
- h5-2
- HTML5-新特性
- html5拖拉
- h5 -1
- HTML5+CSS3 loading 效果收集－－转载
- 2016年最火的15款HTML5游戏引擎
- 非常优秀的8个HTML5前端框架
- ajax与HTML5 history pushState/replaceState实例
- Web开发者不容错过的10个HTML5工具
- 设计师必看的10个HTML5动画工具
- HTML5游戏实战之拼图游戏（包含关卡）
- 客户端存储之HTML5 web存储
- websocket使用
- 30多个HTML5经典动画应用展示
- HTML5性能优化与分析
- HTML5 声明兼容IE的写法(转载)
- 手把手教你搭建自己的Java Web(Android)项目（SpringMVC + Mybatis服务端，Html5 Web端, Android客户端实现）