兩種方式為：拖拽普通標簽位置或拖拽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代碼
<p id="range"> <p class="icon">100*100</p></p>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 代碼
<p> <canvas id="canvas" class="cus-canvas" width="800" height="600"></canvas> <input id="inputele" class="input-ele"/></p>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教程》

云服務器快速備案流程圖
買云服務器價格實惠
一個云服務器租賃費用
視頻無法打開-虛擬主機/數據庫問題
英文單詞域名Bettingodds.com超335萬元成交，領銜DN榜
注冊購買后送空間嗎 怎么購買域名空間
云服務器價格國外
網頁打開非常慢-云服務器問題