<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
div{ | |
width: 400px; | |
height: 500px; | |
margin: 100px; | |
float: left; | |
border: 1px solid lightskyblue; | |
text-align:center; | |
} | |
img{ | |
height:400px; | |
margin-top: 50px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="box"> | |
<img src="img/2 (94).jpg"draggable="true" />//被拖拽的元素中必须添加——draggable="true" | |
</div> | |
<div class="target"></div> | |
<script> | |
var img=document.querySelector("img");//被的拖拽元素 | |
var target=document.querySelector(".target");//拖拽到的位置 | |
target.οndragοver=function(e){//当鼠标悬停在目标位置时,阻止默认事件 | |
e.preventDefault();//阻止默认事件 | |
} | |
target.οndrοp=function(e){//当鼠标松开时,将元素拖拽到目标位置 | |
this.appendChild(img); | |
} | |
</script> | |
</body> | |
</html> | |