h5-3
<!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>
h5-3的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- Objective-C开发图书推荐
日本Objective-C圣经级教材:Objective-C编程全解(第3版) 作 者 [日] 荻原刚志 著:唐璐,翟俊杰 译 出 版 社 人民邮电出版社 出版时间 2015-01-01 版 ...
- spring依赖注入方法
依赖注入就是在程序运行时期,由外部容器动态的将依赖对象注入到组件中,通俗的理解是:平常我们new一个实例,这个实例的控制权是我们程序员,而控制反转是指new实例工作不由我们程序员来做而是交给sprin ...
- 解读Cardinality Estimation<基数估计>算法（第一部分：基本概念）
基数计数(cardinality counting)是实际应用中一种常见的计算场景,在数据分析.网络监控及数据库优化等领域都有相关需求.精确的基数计数算法由于种种原因,在面对大数据场景时往往力不从心, ...
- Github在windows7环境下使用入门
1.下载并安装 下载和安装一般都没什么问题,网上的链接一大堆,不过还是在此给一个安装的地址和安装的参考吧. 当然,安装完成后要保证git能使用,必须配置github 2.配置github 首先是要创建 ...
- 移动端的日期插件 mobiscroll 2.14.4 破解版
官方报价695美元 http://mobiscroll.com/pricing 这个 mobiscroll 2.14.4 破解版 包括datetime和calendar组件,包括mobiscroll和 ...
- Git 提交后开始自动构建
设定Git仓库的钩子 一般路径为 xxx.git/hooks 参考文档 https://git-scm.com/docs/githooks 修改 post-receive #!/bin/bash wh ...
- Xcode升级后插件失效的原理与修复办法
转载:http://joeshang.github.io/2015/04/10/fix-xcode-upgrade-plugin-invalid/ Xcode 的插件大大丰富了 Xcode 的功能,而 ...
- jq 选项卡
<!doctype html> <html> <head> <meta charset="utf-8"> <style> ...
- 安装完 MySQL 后必须调整的 10 项配置（转）
英文原文:10 MySQL settings to tune after installation 译文原文:安装完 MySQL 后必须调整的 10 项配置 当我们被人雇来监测MySQL性能时,人们希 ...
- Django中如何使用django-celery完成异步任务1（转）
原文链接: http://www.weiguda.com/blog/73/ 本篇博文主要介绍在开发环境中的celery使用,请勿用于部署服务器. 许多Django应用需要执行异步任务, 以便不耽误ht ...