html5 拖曳功能的实现[转]
HTML5中实现拖放操作，至少经过如下步骤
1）设置被拖放对象元素的draggable属性设置为true
2）编写与拖放有关的事件处理代码
| 事件 | 产生事件的元素 | 描述 |
| dragstart | 被拖拽物体 | 开始拖放 |
| dragenter | 被拖拽物体开始进入区域 | 进入范围 |
| dragover | 拖放过程中鼠标经过的元素（包括目标对象） | 正在元素上 |
| dragleave | 拖放离开时鼠标经过的元素（包括目标对象） | 离开范围 |
| drop | 目标对象 | 被拖拽物体放下 |
| dragend | 被拖拽物体 | 拖放结束 |
事件发生的顺序： dragstart -> dragenter -> dragover ->dragleave ->drop ->dragend
如果分为两组来看：
| 被拖拽元素 (发生的事件) | 要进入的目标元素（发生的事件） |
| dragstart | dragenter |
| dragend | dragover |
| dragleve | |
| drop |
可以学习一下W3school 的拖放 HTML5 拖放
1. 第一个小例子：做了一个删除icon 的demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Demo</title>
<style>
html,body{width:100%;height:100%;}
.wrapper{ width:580px;margin:0px auto;margin-top:80px;}
ul{list-style:none;}
li{float:left;margin-right:20px;}
img{border-radius:12px;width:100px;height:100px;}
.rubbish{position:absolute;bottom:80px;background:url("drag/220839emsyf6bty8sfgrxf.png")
no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li draggable="true"><img src="drag/mzl.kcoxjsrs.png1.jpg" id="1"/></li>
<li draggable="true"><img src="drag/mzl.dgltpgis.png1.jpg" id="2"/></li>
<li draggable="true"><img src="drag/mzl.eiohimmz.png1.jpg" id="3"/></li>
<li draggable="true"><img src="drag/mzl.aiikkslk.png1.jpg" id="4"/></li>
</ul>
</div>
<div class="rubbish" id="rubbish"></div>
<script>
var iconarr = document.getElementsByTagName("li");//icon数组
var rubbishbin = document.getElementById("rubbish");
for( var i=0;i< iconarr.length;i++ ){
iconarr[i].ondragstart = function(ev){
/*拖拽开始(被拖拽元素) ondragstart 不可以写preventDefault事件*/
ev.dataTransfer.setData("text",ev.target.id);//存储拖拽元素的id*/
}
}
rubbishbin.ondragover = function(ev){
/*拖拽元素进入目标元素头上,不可少*/
ev.preventDefault();
}
rubbishbin.ondrop = function(ev){
/*拖拽元素进入目标元素头上，同时鼠标松开的时候*/
ev.preventDefault();
if(window.addEventListener){
ev.stopPropagation();
}else if(window.attachEvent){
ev.cancelBubble=true;
}
var ul = document.getElementsByTagName("ul")[0];
//拖拽的是img 移除的是Li
var node = document.getElementById(ev.dataTransfer.getData("text")).parentNode;
ul.removeChild(node);
rubbishbin.style.background="url('drag/220926qem3c3dsu53u8sha.png') no-repeat";
}
</script>
</body>
</html>
2. 利用drag & drop拖拽物体更换位置
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk"/>
<title>Demo</title>
<style>
html,body{width:100%;height:100%;}
.wrapper{ width:500px;margin:0px auto;margin-top:80px;}
ul{list-style:none;width:500px;}
li{float:left;margin:0px 20px 20px 0px;position: relative;width:132px;height:132px;}
img{border-radius:12px;width:100px;height:100px;position: relative;-moz-user-select:none;cursor: move;}
.rubbish{position:absolute;bottom:80px;background:url("empty.png")
no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
.hover{border:3px dashed #fff;}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li draggable="true"><img src="http://i1.mm-img.com/ios/78/60/786031289/mzl.kcoxjsrs.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/88/61/886104377/mzl.dgltpgis.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/84/1/840146800/mzl.eiohimmz.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/83/59/835969177/mzl.aiikkslk.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/28/17/281796108/mzl.oyxfxpvw.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/87/85/878549709/mzl.swnecgkk.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/78/70/787063884/mzl.pmfectba.jpg1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/87/18/871809581/mzl.fbyoqfjw.png1.jpg"/></li>
<li draggable="true"><img src="http://i1.mm-img.com/ios/66/93/669390657/mzl.ekoptmtx.png1.jpg"/></li>
</ul>
</div>
<script>
var imgarrs = document.querySelectorAll("img");
var dragnow=null;//目前被拽着的物体
for(var i=0;i< imgarrs.length;i++ ){
addHandler(imgarrs[i],'dragstart',dragstart);
addHandler(imgarrs[i],'dragenter',dragenter);
addHandler(imgarrs[i],'dragover',dragover);
addHandler(imgarrs[i],'dragleave',dragleave);
addHandler(imgarrs[i],'drop',drop);
addHandler(imgarrs[i],'dragend',dragend);
}
function addHandler(node,type,handler){
if(window.addEventListener){
node.addEventListener(type,handler,false);
}else if(window.attachEvent){
node.attachEvent('on'+type,handler);
}
}
function dragstart(e){//被拖拽元素
if(typeof e.target.style.opacity!='undefined'){
e.target.style.opacity='0.4';
}else{
e.target.style.filter = "alpha(opacity=40)";
}
addClass(e.target,"zIndex");
e.dataTransfer.setData("text",e.target.src);//存储图片的src
dragnow=e.target;//目前被拽的物体
}
function dragover(e){//拖拽目标身上的效果
e.preventDefault();
e.dataTransfer.dropEffect='move';
}
function dragenter(e){
if(e.stopPropagation){e.stopPropagation();}
if(typeof e.target.classList !='undefined'){
e.target.classList.add('hover');
}else{
addClass(e.target,"hover");
}
}
function dragleave(e){
removeClass(e.target,"hover");
}
function drop(e){
var src = e.dataTransfer.getData("text");//获取src
e.preventDefault();
if(e.stopPropagation){
e.stopPropagation();
}else if(e.attachEvent){
e.cancelBubble=true;
}
if(dragnow == e.target){
removeClass(e.target,"hover");
removeClass(e.target,"zIndex");
return;
}else{//如果拽着的元素与被拽着的元素一样，不用处理
dragnow.src = e.target.src;
e.target.src = src;
removeClass(e.target,"hover");
removeClass(e.target,"zIndex");
}
}
function dragend(e){
e.preventDefault();
if(typeof e.target.style.opacity!='undefined'){
e.target.style.opacity='1';
}else{
e.target.style.filter = "alpha(opacity=100)";
}//针对FF 在dragend 时候阻止冒泡
removeClass(e.target,"zIndex");
}//发生在被拖拽物体身上
function addClass(node,newclass){
if(node.className.indexOf(newclass)>0){
return;
}
node.className = node.className?node.className+" "+newclass:newclass;
}
function removeClass(node,className){
if(typeof node.classList !='undefined'){
node.classList.remove(className);
}else{
var classarr = node.className.split(/\s+/);
var arr = [];
for( var i=0;i< classarr.length;i++ ){
if(classarr[i] == className)continue;
arr.push(classarr[i]);
}
node.className = arr.join(" ");
}
}
</script>
</body>
</html>
第二个例子中有一点疑惑：
我一开始想用dataTransfer.setData("url",src)来存储src 的，但是发现这样在IE9中getData("url")的时候无法获取值，所以改回"text"了。
html5 拖曳功能的实现[转]的更多相关文章
- HTML5 离线功能介绍
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
- 利用HTML5定位功能，实现在百度地图上定位（转）
原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...
- 分享8款最新HTML5/CSS3功能插件及源码下载
1.HTML5/CSS3鬼脸表情下拉菜单 超级可爱 这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示 源码下载 ...
- Android webView 缓存 Cache + HTML5离线功能 解决
时间 -- :: CSDN博客 原文 http://blog.csdn.net/moubenmao/article/details/9076917 主题 Android HTML5 WebView的缓 ...
- 利用HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 新功能
HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...
- HTML5新增功能
HTML5日期输入类型(date) 1.HTML5规范里只规定date新型input输入类型 HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日 ...
- HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- （webapp）微信和safri 对于html5 部分功能不兼容，多选或单选下拉框去除边框无效果。
1 appearance:none; 2 -moz-appearance:none; /* Firefox */ 3 -webkit-appearance:none; /* Safari 和 Chro ...
随机推荐
- 【JavaScript】HTML5/CSS3实现五彩进度条应用
今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...
- [NodeJS] Deploy a Node Application with the Now CLI
Now offers a friction-free way to deploy node applications right from the terminal. In this lesson, ...
- Linq lamda表达式Single和First方法
让我们来看看如何对一个整数数组使用 Single 操作符.这个整数数组的每个元素代表 2 的 1 到 10 次方.先创建此数组,然后使用 Single 操作符来检索满足 Linq Lambda表达 ...
- 【阿里云产品公测】在Laravel4框架中使用阿里云ACE的缓存服务
作者:阿里云用户dvbhack 受论坛排版和格式限制,这篇帖子的格式不是很利于阅读,如果你看帖子觉得不那么舒服,可以看我发表在自己博客上的原文:http://www.ofcss.com/2014/04 ...
- 【Shell脚本学习13】Shell数组：shell数组的定义、数组长度
Shell在编程方面比Windows批处理强大很多,无论是在循环.运算. bash支持一维数组(不支持多维数组),并且没有限定数组的大小.类似与C语言,数组元素的下标由0开始编号.获取数组中的元素要利 ...
- Android小项目之二 代码的组织结构
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...
- 【转】ViewGroup的onMeasure和onLayout分析
ViewGroup的onMeasure和onLayout分析 一个Viewgroup基本的继承类格式如下: 1 import android.content.Context; 2 import and ...
- mina 字节数组编解码器的写法 I
mina 服务器与 mina 客户端通讯的话, 一.传递 String 时编解码工厂使用 mina 自带的 TextLineCodecFactory 即可: 二.传递 java 对象或 byte[] ...
- Oracle基础（八） 数据完整性
一.数据完整性 数据完整性要求数据库中的数据具有准确性.准确性是通过数据库表的设计和约束来实现的.为了实现数据完整性,数据库需要做两方面的工作: 确保每行的数据符合要求. 确保每列的数据符合要求. 为 ...
- Linux文件系统的barrier：启用还是禁用
大多数当前流行的Linux文件系统,包括EXT3和EXT4,都将文件系统barrier作为一个增强的安全特性.它保护数据不被写入日记.但 是,在许多情况下,我们并不清楚这些barrier是否有用.本文 ...