<!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>
网友评论