创建时间: 2020-03-01;测试:chrome v80.0.3987.122 正常
两种方式为:拖拽普通标签位置或拖拽canvas中的文本框位置
1. 实现鼠标拖动标签元素到任意位置
css 代码
#range {
position: relative;
width: 600px;
height: 400px;
margin: 10px;
background-color: rgb(133, 246, 250);
}
.icon {
position: absolute;
height: 100px;
width: 100px;
cursor: move;
background-color: #ff9204;
user-select: none;
}
html代码
100*100
js代码
const main = document.getElementById('range');
const icon = document.querySelector('.icon');
let move = false;
let deltaLeft = 0, deltaTop = 0;
// 拖动开始事件,要绑定在被移动元素上
icon.addEventListener('mousedown', function (e) {