Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
float: left;
border: 1px dashed green;
}
</style>
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
</head>
<body>
<div id="box1">
<!--draggable="true"--> <!--默认拖拽效果，最好手动默认为true-->
</div>
<div id="box2">
</div>
<script type="text/javascript">
var img = document.querySelector("img")
/*拖拽元素相关事件*/
/*开始拽的时候触发*/
img.ondragstart = function (e) {
//设置元素的标识(在其他事件对象中就会获取到存储的这个值)
e.dataTransfer.setData("id",e.target.id);
}
// /*拖拽过程中触发*/
// img.ondrag = function () {
// console.log("过程")
// }
/*结束触发*/
img.ondragend =function () {
console.log("结束")
}
/*目标元素事件相关，鼠标进入目标元素时触发*/
box2.ondragenter = function () {
console.log("enter")
}
box2.ondragover = function (e) {
console.log("拖拽元素位于元素上方时持续触发");
e.preventDefault();
};
/*离开时触发*/
box2.ondragleave = function () {
console.log("leave");
}
/*在目标元素上方并且松开鼠标时触发*/
box2.ondrop = function (e) {
/*当阻止了dragover事件的默认行为才可以触发*/
// console.log("在目标元素上方并且松开鼠标时触发")
//存储拖拽时存储的拖拽标识
var imgId = e.dataTransfer.getData("id");
this.appendChild(document.querySelector("#"+imgId))
}
box1.ondragover = function (e) {
console.log("拖拽元素位于元素上方时持续触发");
e.preventDefault();
};
box1.ondrop = function (e) {
var imgId = e.dataTransfer.getData("id");
this.appendChild(document.querySelector("#"+imgId))
}
</script>
</body>
</html>