<!DOCTYPE HTML>
<html>
<head>
<title>拖动事件</title>
<style>
*{padding: 0;margin:0}
body{font-size:14px;font-family: "微软雅黑";background:#333}
#box1{width:60px;height:80px;background:#888;text-align:center;border:1px solid #ccc;}
#box2{width:320px;height:420px;background:#fff;position:absolute;right:0;bottom:0}
</style>
</head>
<body>
<div id="box1" draggable="true">
<span draggable="true">Box1</span>
<a href="#">Link</a>
</div>
<div id="box2" draggable="true">
Box2
<img src=""/>
</div>
<script type="text/javascript">
/*
在html5新特性：元素的拖放draggable
ndragstart:拖拽开始 onmousedown
ondrag:拖动中 onmonsemove
ondragend:拖放结束:onmouseup
针对当一些进入目标时候执行的回调函数,用途（ 购物车）
ondragenter:元素进入目标区域时触发
ondragover:元素在目标区域上时触发
ondragleve:元素从目标区域离开时触发
ondrop:有元素进入在目标区域内释放时触发
*/
window.onload = function(){
var boxDom1 = document.getElementById("box1");
var boxDom2 = document.getElementById("box2");
/*拖动元素事件 Start*/
boxDom1.addEventListener("dragstart", function(){
console.log("box1开始了拖拽了--dragstart");
}, false);
boxDom1.addEventListener("drag", function(e){
console.log("box1拖拽中--drag");
}, false);
boxDom1.addEventListener("dragend", function(){
console.log("box1拖放结束--dragend");
}, false);
boxDom1.addEventListener("dragover", function(e){
console.log("box1有元素在其上方--dragover");
e.preventDefault();
}, false);
/*拖动元素事件 End*/
/*目标元素事件 Start*/
boxDom2.addEventListener("dragover", function(e){
console.log("box2有元素在目标区域上方dragover");
//此处要阻止事件冒泡，否则drop事件不能触发
e.preventDefault();
}, false);
boxDom2.addEventListener("dragenter", function(){
console.log("box2 有元素进入目标区域--dragenter");
}, false);
boxDom2.addEventListener("dragleave", function(){
console.log("box2有元素离开目标区域--dragleave");
}, false);
boxDom2.addEventListener("drop", function(){
console.log("box有元素在目标区域释放--drop");
}, false);
/*目标元素事件 End*/
};
</script>
</body>
</html>