Zwei Möglichkeiten, HTML zu implementieren, um die Inhaltsposition zufällig zu ziehen

Test: Chrom V80.0.3987.122 Normal

Zwei Möglichkeiten sind: Ziehen Sie die normale Etikettenposition oder ziehen Sie die Position des Textfelds in Leinwand

Demo -Adresse

CSS -Code

 #Range {Position: Relativ; Breite: 600px; Höhe: 400px; Rand: 10px; Hintergrundfarbe: RGB (133, 246, 250);}. Symbol {Position: absolut; Höhe: 100px; Breite: 100px; Cursor: Bewegung; Hintergrundfarbe: #ff9204; Benutzer-Select: Keine;}

HTML -Code

 <div id = Bereich> <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; Die Position der Bewegung relativ zum übergeordneten Element*/ let dx = cx - deltaleft let dy = cy - deltatop/ ** Über den übergeordneten Elementbereich hinaus verhindern `links: $ {dx} px; obere: $ {dy} px`)}}) // Der Drag -End -Trigger ist auf das Flächensteuerelement Main.AdDeventListener ('Mauseup', Funktion (e) {Move = false; console.log ('mauseup');})

CSS -Code

 .Cus-canvas {Hintergrund: RGB (50, 204, 243);}. Input-ELE {Anzeige: Keine; Position: fest; Breite: 180px; Grenze: 0; Hintergrundfarbe: #fff;}

HTML -Code

 <Div> <Canvas ID = Canvas class = cus-canvas width = 800 hoh Höhe = 600> </Canvas> <Eingabe-ID = Inputele class = input-el/> </div>

JS -Code

Das Implementierungsprinzip besteht darin, die Position der Mausbewegung aufzuzeichnen und das rechteckige Feld und den Textinhalt ständig neu zu zeichnen.

 Sei MouseDown = false; Sei Deltax = 0; Sei Deltay = 0; Text- und Randstil*/ctx.font = 16px arial; ctx.fillStyle = #fff; /** als Zentrum festgelegt, wenn die Mitte des Textfelds am x Punkt von fillText liegt*/ctx.textalign = 'center'; Inputele.value strokerect () inputele.setattribute ('style', `display: none`)}} canvas.ondblclick = Funktion (e) {Inputele.setatTribute ('style',` links: $ {E.clientx} px; top: $ {e.clienty} px; display: block: block;); Inputele.focus ();} canvas.onmouseDown = Funktion (e) { /** den Abstand zwischen der linken Grenze des Ansichtsfensters und der linken Grenze der Leinwand sowie der Länge der Mausklickposition und der linken Grenze der Leinwand erhalten. Dieser Wert ist der unveränderte Wert während der relativen Bewegung*/ deltax = e.clientx - rect.x; Deltay = e.clienty - rect.y; MouseDown = true}; const richterw = cw-rect.width, Judge = ch-rect.height; canvas.onmousemove = function (e) {if (mouseDown) { / ** Subtraktion, um die Länge zwischen der linken Grenze des Rechtecks ​​und der linken Grenze der Leinwand zu erhalten* / let dx = e.clientx-deltax; Sei Dy = E.Clienty-Deltay; if (dx <0) {dx = 0; } else if (dx> urth) {dx = JudgeW; } if (dy <0) {dy = 0; } else if (dy> Judge) {dy = juddingh; } rect.x = dx; rect.y = dy; strokerect ()}}; canvas.onmouseUp = Funktion (e) {MouseDown = false}; /** Löschen Sie den angegebenen Bereich*/Funktion clearrect () {ctx.clearRect (0, 0, cw, ch)}/** Rechtecke zeichnen rect.height) ctx.stroke (); // Setzen Sie den Schriftinhalt und die Position auf der Canvas ctx.FillText (Text, rect.x + 70, rect.y + 30);};};};};

Willkommen, mit Github zu kommunizieren

Dies ist der Artikel über zwei Möglichkeiten, die Inhaltsposition von HTML nach Belieben zu implementieren. Weitere verwandte HTML nach Belieben suchen Sie bitte nach früheren Artikeln von Wulin.com oder stöbern Sie weiter nach unten. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!