Dos formas de implementar HTML para arrastrar al azar la posición de contenido

Prueba: Chrome V80.0.3987.122 Normal

Dos formas son: arrastre la posición de la etiqueta normal o arrastre la posición del cuadro de texto en lienzo

Dirección de demostración

código CSS

 #Range {posición: relativo; Ancho: 600px; Altura: 400px; margen: 10px; Color de fondo: RGB (133, 246, 250);}. icono {posición: absoluto; Altura: 100px; Ancho: 100px; cursor: mover; Color de fondo: #FF9204; Usuario-selección: ninguno;}

código HTML

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

código JS

 const main = document.getElementById ('range'); const icon = document.querySelector ('. icon'); let mude = false; let deltaleft = 0, deltatop = 0; // El evento de inicio de arrastre está vinculado al elemento movido icon.addeventListener ('mouseDown', function (e) {/** @des deltaleft que es el valor de mudmmige* deltaleft = e.clientx-e.target.offsetleft; Posición del movimiento en relación con el elemento principal*/ let dx = cx - deltaleft let dy = cy - deltatop/ ** prevenir más allá del rango de elementos principales*/ if (dx <0) dx = 0 if (dy <0) dy = 0 if (dx> 500) dx = 500 if (dy> 300) dy = 300 iCon.settribute ('style',,,, ',,,',, ',,', `Izquierda: $ {dx} px; top: $ {dy} px`)}}) // El disparador de extremo de arrastre se colocará en el elemento de control de área main.adDeventListener ('mouseup', function (e) {move = false; console.log ('mouseup');})

código CSS

 .cus-canvas {fondo: rgb (50, 204, 243);}. input-el {display: none; Posición: fijo; Ancho: 180px; borde: 0; Color de fondo: #fff;}

código HTML

 <Div> <Canvas id = Canvas class = Cus-Canvas Width = 800 Height = 600> </ Canvas> <Input ID = inputele class = input-ELE/> </div>

código JS

El principio de implementación es registrar la posición del movimiento del mouse y redibujar constantemente el cuadro rectangular y el contenido de texto.

 Let mouseDown = false; dejar deltax = 0; dejar 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, 20, 150, altura: cH = Canvas.Height; const rect = {x: 20, y: 20, 20, 150, auxilio: cH = Canvas.Height; const rect = {X: 20, y: 20, Width: 150, HIGNTH: HIGNTURA: AIMPRES 50}/** establecer texto y estilo de borde*/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.setTribute ('style', `Display: None`)}} Canvas.ondblClick = function (e) {inputele.setattribute ('style',` izquierdo: $ {e.clientx} px; top: $ {e.clienty} px; display: block`); inputele.focus ();} Canvas.OnMousEdown = function (e) { /** Obtenga la distancia entre el límite izquierdo de la vista y el límite izquierdo del lienzo más la longitud de la posición del clic del mouse y el límite izquierdo del lienzo. Este valor es el valor sin cambios durante el movimiento relativo*/ deltax = e.clientx - rect.x; Deltay = e.clienty - rect.y; mouseDown = true}; const juzgar = cw-rect.width, juezh = ch-rect.height; canvas.onmouseMove = function (e) {if (mouseDown) { / ** resta para obtener la longitud entre el límite izquierdo del rectángulo y el límite izquierdo de la lona* / let dx = e.clientx-eleltax; Dejar dy = e.clienty-detelay; if (dx <0) {dx = 0; } else if (dx> juezw) {dx = juzgarw; } if (dy <0) {dy = 0; } else if (dy> juzgar) {dy = jueces; } 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 (); // Establezca el contenido de fuente y la posición en el lienzo CTX.FillText (Text, Rect.x + 70, Rect.y + 30);}

Bienvenido a comunicarse con Github

Este es el artículo sobre dos formas de implementar la posición de contenido de HTML a voluntad. Para obtener más HTML relacionado a voluntad, busque artículos anteriores de wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!