一、知识存储展
1、兵马未动粮草先行 —->api展
|———————-1.draggable属性
|——true: 元素能被拖拽
|——false: 元素不能被拖拽
|——auto: 浏览器自己判断元素是否能被拖拽 ( 默认 )
|
|———————-2.拖放对象属性
|——dragstart：按下鼠标键并开始移动时触发
|——drag：在元素拖拽过程中持续触发
|——dragend：元素拖拽停止时触发
|
|———————-3.拖拽对象放置区属性(对象被拖动到有效的放置目标时，下列事件会依次发生哦)
|——dragenter：当拖拽对象进入投放区时触发
|——dragover ：拖拽对象在投放区内移动时持续触发
|——dragleave：元素被拖出了投放区时触发
|——drop ：拖拽对象投放在投放区时触发
|
|———————-4.dataTransfer对象常用方法与属性
|——setDragImage (图标，图标距指针X轴偏移值，Y轴偏移值)；方法拖动时显示在鼠标光标下的小图标
|——dropEffect 表示被拖动的元素能够执行哪种放置行为
|–“none” : 不能把拖动的元素放在这里
|–“move”: 把拖动的元素移动到放置目标
|–“copy”: 把拖动的元素复制到放置目标
|–“link”: 放置目标会打开拖动的元素（有URL）
|
|——effectAllowed 允许拖动元素的哪种dropEffect属性
|–“copyLink” : 允许值为copy和link的dropEffect
|–“move” : “copyMove”: 允许值为copy和move的dropEffect
|–“linkMove” : 允许值为link和move的dropEffect
|–“link” : 放置目标会打开拖动的元素（有URL）
|–“all” : 允许所有的dropEffect
|
|———————-5.files 文件拖拽行为
|——dataTransfer.files：若拖放的是文件类型，则返回正在拖放文件的列表
|——FileReader：读取文件专用，FileReader 接口提供一些读取文件的方法与包含读取结果的事件模型
|——FileReader.readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
|——FileReader.onload事件：读取文件成功完成时触发，事件触发后，可通过this.result来获取读取的文件数据，如果是图片，将以base64格式的图片数据返回。
|
|———————-终结————————
注：Safari 5.1.2 中不支持拖放技术二、小试牛刀，以展风骚
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5拖拽技术---康怀安</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
#container {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function myDrag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function myDrop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖拽自己的图片到矩形框中吧</p>
<div id="container" ondrop="myDrop(event)" ondragover="allowDrop(event)"></div>
<br>
<hr>
<br>
<img id="drags" src="img/a1.png" draggable="true" ondragstart="myDrag(event)" width="336" height="69">
</body>
</html>三、“牛刀”详解
1、设置元素为可拖放：
<img draggable="true">2、拖动什么与发生什么
function myDrag(e) {
e.dataTransfer.setData("Text",e.target.id);
}
注：此例中，数据类型是 "Text"，值是可拖动元素的 id ("drags")。3、放到何处
event.preventDefault();
注：默认地，无法将数据/元素放置到其他元素中。若要设置允许放置，必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法4、进行放置
function myDrop(e) {
e.preventDefault();
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}到此就讲解完毕了，谢谢大家查阅，如有不足希望大家斧正
