如题,分析,涉及到两个角色,一个是可拖动的元素,取名为节点。另一个是什么呢?如果一个元素可拖动,当它停止的时候,总要依附于什么,这个角色取名为画布。
通过场景,分析出了两个角色,进而可以得出两个角色具备的功能。
节点:
- 可被拖动。
- 拖动开始事件。
- 拖动结束事件。
画布:
- 元素在其中可被放置。
如上,核心功能已经确定,且看代码如何简单。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#canvas {
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
.node {
width: 100px;
height: 100px;
border: 1px solid green;
position: absolute;
}
</style>
</head>
<body>
<div id="canvas">
<div class="node">我可以被拖动</div>
</div>
<script>
const canvas = document.querySelector('#canvas') // 画布
const node = document.querySelector('.node') // 节点
class Drag {
constructor (canvas, node) {
this.canvas = canvas
this.canvas.ondragover = event => event.preventDefault() // 设置画布可被拖入元素
this.node = node
node.setAttribute('draggable', true) // 设置元素可被拖动
node.addEventListener('dragstart', this.dragstart.bind(this))
node.addEventListener('dragend', event => this.dragend(event))
}
dragstart (event) {
this.ondragstartX = event.x
this.ondragstartY = event.y
this.node.style.opacity = 0.382
}
dragend (event) {
const offsetX = event.x - this.ondragstartX
const offsetY = event.y - this.ondragstartY
const node = this.node
const left = node.offsetLeft + offsetX
const top = node.offsetTop + offsetY
node.style.left = left + 'px'
node.style.top = top + 'px'
node.style.opacity = 1
}
}
// 设置可拖动的元素及画布
new Drag(canvas, node)
</script>
</body>
</html>
以上,是全部实现,全部拷贝代码,可以轻松验证。如果有疑问,留言讨论。