W3C中关于H5拖拽(拖放)的介绍
拖放（Drag 和 drop）是 HTML5 标准的组成部分
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
拖拽的API
-
实现拖拽效果
源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 -
目前实现拖拽效果
使用原生DOM就能实现 - 最麻烦 使用jQuery的插件 HTML5拖拽
-
源元素事件
dragstart - 当鼠标开始拖放时被触发 drag - 当鼠标拖放过程中被触发 dragend 当鼠标拖放结束时被触发 -
目标元素事件
dragover - 当鼠标到达目标元素被触发，会反复触发 dragenter - 当鼠标拖放进入到目标元素内触发 dragleave - 当鼠标离开目标元素时触发 drop - 当鼠标实现拖放效果时被触发 -
问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为
解决：在dragover的事件中阻止默认行为即可event.preventDefault(); -
时间关系：
dragstart<drag(dragenter [<dragleave] <dragover [<dragleave])<drop<dragend
下面的例子是<a href="http://www.w3school.com.cn/html5/html_5_draganddrop.asp">W3School</a> 提供的一个简单的拖放实例：
实例
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
你可以自己去尝试下
由于浏览器默认元素不可拖拽，因此我们需要给要拖拽的元素设置 draggables属性(注意两个有字母 g 哦)
<li draggable="true"> </li>
<div draggable="true"> </div>
下面是博主拖拽的一些练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<link rel="stylesheet" type="text" href=".css">
<style type="text/css">
.list{width:150px;background-color:mistyrose;}
.opt{width:150px;background-color:salmon;}
li{
list-style:none;
font-size:20px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid black;
}
</style>
<script src=""></script>
<title>竖排显示小组的成员，可以拖动改变位置</title>
</head>
<body>
<h2>竖排显示小组的成员，可以拖动改变位置</h2>
<p>实现插入效果</p>
<div class="list">
<li data-li="0">北极熊</li>
<li data-li="1">帝企鹅</li>
<li data-li="2">海鸥</li>
<li data-li="3">候鸟</li>
<li data-li="4">海豚</li>
</div>
<p>交换效果,有bug</p>
<div class="opt">
<li data-li="0">广东</li>
<li data-li="1">北京</li>
<li data-li="2">上海</li>
<li data-li="3">南昌</li>
<li data-li="4">武汉</li>
</div>
</div>
<script type="text/javascript">
/*********************插入效果****************/
// draggable="true"
var lis=document.querySelectorAll(".list li");
var temp;
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('draggable',true);
lis[i].ondragend=function(){
// 实现插入效果
this.parentNode.insertBefore(this,temp);
// 释放内存
temp=null;
};
// lis[i].ondrop=function(){
// console.log(this);
// };
// lis[i].ondragstart=function(){
// temp=this;
// console.info(temp);
// }
// 保存插入位置的元素
lis[i].ondragover=function(){
event.preventDefault();
temp=this;
};
}
/*********************交换效果****************/
var opts=document.querySelectorAll(".opt li");
//存储========被交换的元素及其信息
var arr,arr_li,arr_val;
for(var n=0;n<opts.length;n++){
opts[n].setAttribute('draggable',true);
//被拖拽的元素
opts[n].ondragend=function(){
//实现交换效果
//被拖拽的元素-----存储交换前的信息
var content_li=this.getAttribute('data-li');
var content_val=this.innerHTML;
if(arr_val!="" || arr_val!=null){
//被拖拽的元素与被交换的元素进行交换
this.setAttribute("data-li",arr_li);
this.innerHTML=arr_val;
//被拖拽的元素--存储交换前的信息 与被交换的元素进行交换
arr.setAttribute("data-li",content_li);
arr.innerHTML=content_val;
// 清空交换的信息-----释放内存
arr=arr_li=arr_val=null;
}else{
this.setAttribute("data-li",content_li);
this.innerHTML=content_val;
}
console.log("dragend");
};
// 将要被交换的元素
opts[n].ondragenter=function(){
console.info("dragenter");
// 将要被交换的元素-----存储交换前的信息
arr=this;
arr_li=this.getAttribute("data-li");
arr_val=this.innerHTML;
};
//离开-目标元素
opts[n].ondragleave=function(){
console.info("dragleave");
// 离开将要被交换的元素-----清空存储交换前的信息
// arr_li=arr_val=null;
};
// 防止事件被阻止
opts[n].ondragover=function(){
event.preventDefault();
console.info("dragover");
};
// 测试
opts[n].ondrop=function(event){
console.info(this);
console.info("drop");
};
opts[n].ondragstart=function(){
console.info("dragstart");
};
}
</script>
</body>
</html>
dataTransfer对象
作用：类似于window系统的剪切板功能
功能：可以将源元素的信息，存储在这里，提供给目标元素
-
使用：
使用事件对象获取到dataTransfer对象
var trans = event.dataTransfer;设置数据
setData(type,data)方法 type:类型，特指标识(id)，一般为字符串 data:设置的数据内容获取数据
getData(type);清除数据
clearData(type) 所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除事件对象 - 作为事件处理函数的参数存在 DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准
JavaScript File API
使用 JavaScript File API 实现从本地拖拽一个图片到页面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件读取对象
var reader = new FileReader();
//读取文件
reader.readAsDataURL(file);
//读取完以后加载
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
JavaScript File API的使用我就不做说明了(因为人家写的相当详细)
下面的网址是 IBM 上关于JavaScript File API的一个详细介绍
<a href="http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/index.html?ca=drs-">http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/index.html?ca=drs-</a>
其中的getAsDataURL函数返回一个形如 data: 的 URL，这个URL包含了所涉及到的内容的编码形式。
注： getAsDataURL() 方法已经废弃，你应该使用 FileReader 对象中的readAsDataURL() 方法作为替代。
readAsDataURL()的使用：
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL">https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL</a>
不过使用 readAsDataURL()得到的 reader.result 的返回值 data 太长了 →_→
