反饋圖像
1. 默認(rèn)反饋圖像
默認(rèn)反饋圖像是拖拽目標(biāo)的一個(gè)半透明圖像儒旬。
示例效果
圖片.gif
2.自定義反饋圖像
通過(guò)dataTransfer.setDragImage(image, xOffset, yOffset)方法來(lái)自定義拖拽反饋圖像婚度。
示例效果
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">這是一個(gè)非默認(rèn)拖拽元素</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>
