html隨意拖動內容位置的兩種實現方式

測試：chrome v80.0.3987.122 正常

兩種方式為：拖拽普通標籤位置或拖拽canvas中的文本框位置

演示地址

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代碼

<div id=range> <div class=icon>100*100</div></div>

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');})

css 代碼

.cus-canvas{ background: rgb(50, 204, 243);}.input-ele{ display: none; position: fixed; width: 180px; border: 0; background-color: #fff;}

html 代碼

<div> <canvas id=canvas class=cus-canvas width=800 height=600></canvas> <input id=inputEle class=input-ele/></div>

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);}

歡迎交流Github

到此這篇關於html隨意拖動內容位置的兩種實現方式的文章就介紹到這了,更多相關html隨意拖動內容內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持武林網！