html调整网页内容位置,网页制作html随意拖动内容位置的两种实现方式

测试：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) {

/*</