属性
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果。
<div title="拖拽我" draggable="true">列表1</div>
事件
//用在被拖拽元素上
- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- drag：被拖动的元素在拖动过程中持续触发,此事件作用在被拖曳元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
//用在目标元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。
对象
- DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
dataTransfer对象的方法：
setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
实例
<div id="box"></div>
<div id="drag_box" draggable="true"></div>
<script>
//获取被拖动的元素、
var dragBox = document.querySelector("#drag_box");
//获取目标元素
var box = document.querySelector("#box");
//给目标元素绑定事件
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //阻止默认的动作
}, false);
box.addEventListener("drop", function(e){
//把被拖拽的元素 放入目标元素
this.appendChild(document.getElementById(e.dataTransfer.getData('dragElement')));
//样式恢复
this.classList.remove("over");
},false);
//给被拖拽的元素绑定事件
dragBox.addEventListener("dragstart", function(e){
//把被拖拽的元素放入dataTransfer
e.dataTransfer.setData('dragElement', this.id);
}, false);
实例二，将电脑文件夹中的图片拖拽到页面当中去
<h3>请把文件夹中的图片拖到下面区域</h3>
<div id="box"></div>
<script>
//获取目标元素
var box = document.querySelector("#box");
//给目标元素绑定事件
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //阻止默认的动作
}, false);
box.addEventListener("drop", function(e){
e.preventDefault(); //阻止浏览器默认行为
console.log(e)
//遍历FileList
[].forEach.call(e.dataTransfer.files, function(itemFile){
//读取文件
readImage(itemFile);
})
this.classList.remove("over"); //恢复样式
},false);
/**
* 读取图片
* @param File fileObj
*/
function readImage(fileObj) {
//创建FileReader对象
var frObj = new FileReader();
//监听读取成功
frObj.onload = function(){
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
//读取
frObj.readAsDataURL(fileObj);
}
