Duas maneiras de implementar o HTML para arrastar aleatoriamente a posição do conteúdo

Teste: Chrome V80.0.3987.122 Normal

Duas maneiras são: arraste a posição normal da etiqueta ou arraste a posição da caixa de texto em tela

Endereço de demonstração

Código CSS

 #Range {Position: relativo; Largura: 600px; Altura: 400px; margem: 10px; Background-Color: RGB (133, 246, 250);}. Ícone {Posição: Absolute; Altura: 100px; Largura: 100px; Cursor: Mova; Background-Color: #FF9204; Seleção de usuário: Nenhum;}

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'); vamos mover = false; deixe deltaleft = 0, deltatop = 0; // o evento de início de arrasto deve ser vinculado ao elemento movido icon.adDeventListener ('MouseDown', function (e) {) = e.clientx-e.target.offsetleft; Em relação ao elemento pai*/ deixe dx = cx - deltaleft, deixe dy = cy - deltatop/ ** impedir além da faixa do elemento pai*/ if (dx <0) dx = 0 se (dy <0) dy = 0 se (dx> 500) dx = 500 se (dy> 300) dy = 300 icon.etattribute ('estilo',, estilo ', `Esquerda: $ {dx} px; top: $ {dy} px`)}}) // O gatilho da extremidade de arrasto deve ser colocado no elemento de controle de área main.addeventListener ('mouseup', function (e) {move = false; console.log ('mouseup');})

Código CSS

 .cus-canvas {background: rgb (50, 204, 243);}. input-ele {display: nenhum; Posição: fixado; Largura: 180px; borda: 0; Background-Color: #fff;}

Código HTML

 <div> <canvas id = Canvas Class = cus-canvas width = 800 altura = 600> </canvas> <ID de entrada = inputEle class = input -ele/> </div>

Código JS

O princípio da implementação é registrar a posição do movimento do mouse e redesenhar constantemente a caixa retangular e o conteúdo de texto.

 Seja Mousedown = false; deixe deltax = 0; deixe deltay = 0; deixe text = 'hello'Const Canvas = document.getElementById (' Canvas '); const ctx = Canvas.getContext (' 2d '); const cw = teath.width, = CHETS.Hex; Texto e estilo de borda*/ctx.font = 16px Arial; ctx.fillstyle = #fff; /** Defina como centro quando o centro do campo de texto estará no ponto X do FillText*/ctx.texTalign = 'Center'; ctx.linewidth = '2'; ctx.strokestyle = '#fff'; strokerect () const () text = inputEle.Value strokerect () inputEle.setAttribute ('style', `display: none`)}} canvas.ondblClick = function (e) {inputEle.setAttribute ('style',` esquerda: $ {e.clientX} px; top: $ {E.clienty}} inputEle.focus ();} Canvas.onMousedown = function (e) { /** Obtenha a distância entre o limite esquerdo da viewport e o limite esquerdo da tela mais o comprimento da posição de cliques do mouse e o limite esquerdo da tela. Este valor é o valor inalterado durante o movimento relativo*/ deltax = e.clientX - rect.x; deltay = e.clienty - ret.y; mousedown = true}; const Judgew = cw-relect.width, juizh = ch-rect.Height; canvas.onMousemove = function (e) {if (mousedown) { / ** subtração para obter o comprimento entre o limite esquerdo do retângulo e o limite esquerdo da tela* / let dx = e.cientx diminuir; Seja dy = e.clienty-deltay; if (dx <0) {dx = 0; } else if (dx> juizw) {dx = juizw; } if (dy <0) {dy = 0; } else if (dy> juizh) {dy = juizh; } rect.x = dx; ret.y = dy; strokerect ()}}; canvas.onMouseup = function (e) {mousedown = false}; /** Limpe a área especificada*/função clearRect () {ctx.clearrect (0, 0, cw, ch)}/** desenhe retângulos*/function strokerect () {clearRect ()/** se não for chamado aqui, o retângulo histórico será re-drawn* rect.Height) ctx.stroke (); // Defina o conteúdo da fonte e a posição na tela ctx.fillText (texto, rect.x + 70, ret.y + 30);}

Bem -vindo a se comunicar com o Github

Este é o artigo sobre duas maneiras de implementar a posição de conteúdo do HTML à vontade. Para mais HTML relacionado à vontade, procure artigos anteriores do Wulin.com ou continue a navegar pelos artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!