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,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- 怎么去掉Xcode工程中的某种类型的警告
XCode警告 问题描述 在我们的项目中,通常使用了大量的第三方代码,这些代码可能很复杂,我们不敢改动他们,可是作者已经停止更新了,当sdk升级或者是编译器升级后,这些遗留的代码可能会出现许许多 ...
- Windows平台分布式架构-负载均衡(高并发)
缘由 单纯想在winodows平台部署分布式程序,微软在IIS扩展的介绍中有涉及到Application Request Router + Web Farm + Url Rewriter可以实现分布式 ...
- 什么是Mocking framework？它有什么用？
原位地址:http://codetunnel.com/blog/post/what-is-a-mocking-framework-why-is-it-useful 今天我想讲下关于mocking fr ...
- UVa 297 - Quadtrees
题目:利用四叉树处理图片,给你两张黑白图片的四叉树,问两张图片叠加后黑色的面积. 分析:搜索.数据结构.把图片分成1024块1*1的小正方形,建立一位数组记录对应小正方形的颜色. 利用递归根据字符串, ...
- JAVA网站高并发解决方案
一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单,随着互联网业务的不断丰富,网站 ...
- 修改Android 程序的icon快捷方式图标和名称
在res/drawable-hdpi或res/drawable-ldpi或res/drawable-mdpi目录下,加下你要显示的图片,最好后缀是为.png的,然后修改AndroidManifest. ...
- 最小生成树之Prime法
关于最小生成树的概念,在前一篇文章中已经讲到,就不在赘述了.下面介绍Prime算法: 其基本思想为:从一个顶点出发,选择由该顶点出发的最小权值边,并将该边的另一个顶点包含进来,然后找出 ...
- c# abstract抽象类与继承类子类的构造函数_base
http://blog.itpub.net/9240380/viewspace-718054/ http://blog.163.com/cloud_thegreat/blog/static/10367 ...
- Gartner：Hype Cycle for Emerging Technologies-2013
The “Hype Cycle for Emerging Technologies” report is the longest-running annual Hype Cycle, provid ...
- 重学HTML
http://www.imooc.com/learn/9 1.em/strong 如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签. 但两者在 ...