反馈图像
1. 默认反馈图像
默认反馈图像是拖拽目标的一个半透明图像。
示例效果
图片.gif
2.自定义反馈图像
通过dataTransfer.setDragImage(image, xOffset, yOffset)方法来自定义拖拽反馈图像。
示例效果
example2.gif
示例代码
注：代码中图片路径需替换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.imgIcon {
width: 100px;
height: auto;
}
.position1 {
position: absolute;
top: 0;
left: 0;
}
p {
position: relative;
padding: 20px;
border: 1px solid grey;
}
.div-box {
border: 1px solid skyblue;
height: 500px;
}
.div-box:-moz-drag-over {
border: 1px solid black;
}
.imgbox {
width: 50px;
height: auto;
}
</style>
</head>
<body>
<img id="img" src="../img/2.jpg" alt="" class="imgbox">
<p draggable="true" ondragstart="dragstart(event)" id="paragraph">这是一个非默认拖拽元素</p>
<div class="div-box" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)">
</div>
<script>
const type = 'text/plain'
const image = document.getElementById('img')
const dragstart = (event) => {
event.dataTransfer.setData(type, event.target.id)
event.dataTransfer.setDragImage(image, 10, 10)
}
const dragenter = (event) => {
}
const dragover = (event) => {
event.preventDefault()
}
const drop = (event) => {
var data = event.dataTransfer.getData(type);
const el = document.getElementById(data)
event.target.appendChild(el)
}
</script>
</body>
</html>
