圖片來源于網(wǎng)絡
image.png
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: space-around;
}
div {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<img id="img" draggable="true" src="https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF" alt=""
style="width: 100%;">
</div>
<div>
<img draggable="true" id="img2"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640826846&t=5e870dbe84464ba221699d468988cf47"
alt="" style="width: 100%;">
</div>
<div id="drop">
拖拽到此處
</div>
<script>
let img = document.getElementById('img')
let img2 = document.getElementById('img2')
let drop = document.getElementById('drop')
img.ondragstart = function (e) {
e.dataTransfer.setData('id', e.target.id);
}
img2.ondragstart = function (e) {
e.dataTransfer.setData('id', e.target.id);
}
drop.ondragover = function (e) {
e.preventDefault();
}
drop.ondrop = function (e) {
drop.innerHTML = '';
var imgId = e.dataTransfer.getData('id');
var img = document.getElementById(imgId).cloneNode(true);
drop.appendChild(img);
}
</script>
</body>
</html>
