<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
.box1 img {
width: 300px;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/1.jpg" alt="" draggable="true" id="dragImg">
</div>
<div class="box2" ondragstart=""></div>
</body>
<script>
//ondragstart 作用于拖拽元素 當拖拽開始的時候被調用
//ondrag 作用于拖拽元素 拖拽過程中 持續調用
//ondragend 作用于拖拽元素 在拖拽完成時被調用
//ondragenter 作用于目標元素 在拖拽元素進入到目標元素被調用
//ondragleave 作用于目標元素 在拖拽元素離開目標元素被調用
//ondragover 作用于目標元素 在拖拽元素位于目標元素上方時 持續被調用
//ondrop 作用于目標元素 在拖拽元素位于目標元素上方鼠標松開被調用
/* img.ondragstart = function (e) {
console.log('start')
}
/!img.ondrag = function (e) {
console.log('drag')
}!/
box2.ondragenter = function (e) {
console.log("enter")
}
box2.ondragleave = function (e) {
console.log("leave")
}
box2.ondragover = function (e) {
console.log("over")
}
box2.ondrop = function (e) {
console.log("drop")
}
img.ondragend = function (e) {
console.log("end")
}*/
//拖拽釋放的步驟
//1、在 拖拽元素上 ondragstart 給e.dataTransfer 對象設置一二拖拽元素標識
//2、在 ondrop 給e.dataTransfer 獲取到 設置的拖拽對象的標識
//3、通過獲取到標識 去獲取拖拽元素
//4、將獲取到的拖拽元素 添加到目標元素內
var img = document.querySelector('img');
var box1 =document .querySelector(".box1")
var box2 = document.querySelector('.box2')
box1.ondragover = function (e) {
e.preventDefault();
}
box1.ondrop =function (e) {
var _id = e.dataTransfer.getData("id");
var img = document.querySelector("#"+_id)
box1.appendChild(img);
}
box2.ondragover = function (e) {
//阻止默認行為
e.preventDefault();
}
box2.ondrop =function (e) {
// 第二步
var _id = e.dataTransfer.getData("id");
// 第三步
var img = document.querySelector("#"+_id)
// 第四步
box2.appendChild(img);
}
img.ondragstart = function (e) {
// dataTransfer 是事件對象用來存儲拖拽信息的對象
// setData() 方法進行設置標識需要傳入兩個參數
// 第一個為標識的key 第二個為標識的值
//第一步
e.dataTransfer.setData("id",e.target.id);
console.log("start");
}
</script>
</html>
