Two ways to implement html to randomly drag content position

Test: chrome v80.0.3987.122 Normal

Two ways are: drag the normal label position or drag the text box position in canvas

Demo address

css code

 #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 code

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

js code

 const main = document.getElementById('range');const icon = document.querySelector('.icon');let move = false;let deltaLeft = 0, deltaTop = 0;// The drag start event is to be bound to the moved element icon.addEventListener('mousedown', function (e) { /* * @des deltaLeft that is the unchanged value during the movement*/ deltaLeft = e.clientX-e.target.offsetLeft; deltaTop = e.clientY-e.target.offsetTop; move = true;})// The movement trigger event should be placed on the area control element main.addEventListener('mousemove', function (e) { if (move) { const cx = e.clientX; const cy = e.clientY; /** Subtract to get the position of movement relative to the parent element*/ let dx = cx - deltaLeft let dy = cy - deltaTop /** Prevent beyond the parent element range*/ 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`) }})// The drag end trigger is to be placed on the area control element main.addEventListener('mouseup', function (e) { move = false; console.log('mouseup');})

css code

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

html code

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

js code

The implementation principle is to record the position of the mouse movement and constantly redraw the rectangular box and text content.

 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}/** Set text and border style*/ctx.font=16px Arial;ctx.fillStyle = #fff; /** Set as center When the center of the text field will be at the x point of fillText */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){ /** Get the distance between the left boundary of the viewport and the left boundary of the canvas plus the length of the mouse click position and the left boundary of the canvas. This value is the unchanged value during the relative movement*/ 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) { /** Subtraction to obtain the length between the left boundary of the rectangle and the left boundary of the 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}; /** Clear the specified area*/function clearRect() { ctx.clearRect(0, 0, cw, ch)}/** Draw rectangles*/function strokeRect() { clearRect() /** If beginPath is not called here, the historical rectangle will be re-drawn*/ ctx.beginPath() ctx.rect(rect.x, rect.y, rect.width, rect.height) ctx.stroke(); // Set the font content and the position on the canvas ctx.fillText(text, rect.x + 70, rect.y + 30);}

Welcome to communicate with Github

This is the article about two ways to implement the content position of html at will. For more related html at will, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!