<!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的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. 链表回文串判断&&链式A+B

    有段时间没有练习了,链表回文串判断用到了栈.链式A+B将没有的项用0补充.链表有没有头节点,及结点和链表的区别,即pNode和pHead. //#include<iostream> //u ...

  2. Winform後台如何動態修改App.config文件里的內容

    以下方法修改的,自己添加的app.config裡面不會顯示出修改的東西. 方法一:通過使用System.Xml.XmlDocument對象的方法進行bin\debug\~.vshost.exe.Con ...

  3. Spring MVC 问题列表:目录

    学习SpringMVC时遇到不少问题,这里将其汇总. 1.怎么搭建SpringMVC 2.SpringMVC和Spring使用是配置到一个文件中还是两个配置文件 3.SpringMVC接受从前台请求 ...

  4. s3c2440串口裸板驱动(使用fifo)

    使用fifo的好处有: 1:串口的数据发送的数据量较大时,使用fifo可以大大降低MCU的开销.(有点类似串入并出的cput处理模型,本质上还是串行收发) 2:在某些特殊场合,例如制定较复杂的协议时, ...

  5. Jquery 遍历表单 AJAX提交

    function test(){ var arrayObj = new Array(); $("#contentTable tbody tr").each(function(){ ...

  6. BestCoder Round #88

    传送门:BestCoder Round #88 分析: A题统计字符串中连续字串全为q的个数,预处理以下或加个cnt就好了: 代码: #include <cstdio> #include ...

  7. [cocos2d-js]按钮整合成大图后打APK后不显示

    网页版本都能正常显示碎图和整合成大图的 手机版本不正常 var btnKick = cc.MenuItemImage.create( "#btn_kick.png", " ...

  8. mysql cluster 名词概念解读

    Node Group [number_of_node_groups] = number_of_data_nodes / NoOfReplicas Partition When using ndbd, ...

  9. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  10. python开发vim插件

    [python开发vim插件] 按如下方式使用python开发vim插件,注意调用时使用的是exec. 但在函数中嵌入python代码更为简便,如下: python如何传递参数给python: 代码头 ...