<!DOCTYPE HTML>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
position: absolute;
right: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
#drag1 {
display: block;
width: 120px;
height: auto;
}
</style>
<script type="text/javascript">
// 这里设置移动到div此位置 松开便停止移动
function allowDrop(ev) {
console.log(111);
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id)
}
function drop(ev) {
// 这里限制了 div内只能存在一个img元素
if (ev.target.id === 'drag1' && ev.target.parentElement.childNodes.length >= 1) {
alert('只能存在一个元素')
return
}
ev.preventDefault()
var data = ev.dataTransfer.getData("Text")
ev.target.appendChild(document.getElementById(data))
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/static/image/games/food1.png" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
<img draggable="true" />
来设置元素可以被拖动
ondragstart
拖动的数据类型触发 ondragover
拖动过程触发 ondrop
放置拖动数据触发