html自动上拉到一定位置,HTML 如何实现随意拖动内容位置

HTML 如何实现随意拖动内容位置

发布时间：2020-07-20 13:53:27

来源：亿速云

阅读：368

作者：Leah

这篇文章运用简单易懂的例子给大家介绍HTML 如何实现随意拖动内容位置，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

两种方式为：拖拽普通标签位置或拖拽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) {

/*

* @des deltaLeft 即移动过程中不变的值

*/

deltaLeft = e.clientX-e.target.offsetLeft;

deltaTop = e.clientY-e.target.offsetTop;

move = true;

})

// 移动触发事件要放在，区域控制元素上

main.addEventListener('mousemove', function (e) {

if (move) {

const cx = e.clientX;

const cy = e.clientY;

/** 相减即可得到相对于父元素移动的位置 */

let dx = cx - deltaLeft

let dy = cy - deltaTop

/** 防止超出父元素范围 */

if (dx < 0) dx = 0

if (dy < 0) dy = 0

if (dx > 500) dx = 500

if (dy > 300) dy = 300

icon.setAttribute('style', `left:${dx}px;top:${dy}px`)

}

})

// 拖动结束触发要放在，区域控制元素上

main.addEventListener('mouseup', function (e) {

move = false;

console.log('mouseup');

})

2. canvas绘制文本框，并实现鼠标将其拖拽移动到任意位置

css 代码.cus-canvas{

background: rgb(50, 204, 243);

}

.input-ele{

display: none;

position: fixed;

width: 180px;

border: 0;

background-color: #fff;

}

html 代码

js代码

实现原理为记录鼠标移动的位置，不断的重绘矩形框和文本内容let mouseDown = false;

let deltaX = 0;

let deltaY = 0;

let text = 'hello'

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const cw = canvas.width, ch = canvas.height;

const rect = {

x: 20,

y: 20,

width: 150,

height: 50

}

/** 设置文字和边框样式 */

ctx.font="16px Arial";

ctx.fillStyle = "#fff";

/** 设置为 center 时，文字段的中心会在 fillText的 x 点 */

ctx.textAlign = 'center';

ctx.lineWidth = '2';

ctx.strokeStyle = '#fff';

strokeRect()

const inputEle = document.getElementById('inputEle');

inputEle.onkeyup = function(e) {

if(e.keyCode === 13) {

text = inputEle.value

strokeRect()

inputEle.setAttribute('style', `display:none`)

}

}

canvas.ondblclick = function(e){

inputEle.setAttribute('style', `left:${e.clientX}px;top:${e.clientY}px;display:block`);

inputEle.focus();

}

canvas.onmousedown = function(e){

/** 获取视口左边界与canvas左边界的距离 加上 鼠标点击位置与canvas左边界的长度，这个值是相对移动过程中不变的值 */

deltaX=e.clientX - rect.x;

deltaY=e.clientY - rect.y;

mouseDown = true

};

const judgeW = cw-rect.width, judgeH = ch-rect.height;

canvas.onmousemove = function(e){

if(mouseDown) {

/** 相减即可获得矩形左边界与canvas左边界之间的长度 */

let dx = e.clientX-deltaX;

let dy = e.clientY-deltaY;

if(dx < 0) {

dx = 0;

} else if (dx > judgeW) {

dx = judgeW;

}

if(dy < 0) {

dy = 0;

} else if(dy > judgeH) {

dy = judgeH;

}

rect.x = dx;

rect.y = dy;

strokeRect()

}

};

canvas.onmouseup = function(e){

mouseDown = false

};

/** 清除指定区域 */

function clearRect() {

ctx.clearRect(0, 0, cw, ch)

}

/** 画矩形 */

function strokeRect() {

clearRect()

/** 这里如果不调用 beginPath 历史的矩形会重新被绘制 */

ctx.beginPath()

ctx.rect(rect.x, rect.y, rect.width, rect.height)

ctx.stroke();

// 设置字体内容，以及在画布上的位置

ctx.fillText(text, rect.x + 70, rect.y + 30);

}

关于HTML 如何实现随意拖动内容位置就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。