Dua cara untuk mengimplementasikan HTML untuk menyeret posisi konten secara acak

Tes: Chrome V80.0.3987.122 Normal

Dua cara adalah: seret posisi label normal atau seret posisi kotak teks di kanvas

Alamat demo

Kode CSS

 #range {position: relatif; Lebar: 600px; Tinggi: 400px; margin: 10px; latar belakang-warna: rgb (133, 246, 250);}. Ikon {posisi: absolute; Tinggi: 100px; Lebar: 100px; Kursor: Pindah; Latar Belakang-Color: #FF9204; Pilih Pengguna: Tidak Ada;}

Kode HTML

 <Div id = range> <div class = ikon> 100*100 </div> </div>

Kode JS

 const main = document.geteLementById ('range'); const icon = document.queryselector ('. Ikon'); let move = false; let deltaleft = 0, deltatop = 0; // acara drag start harus terikat pada elemen yang dipindahkan icon.addeventener ('mousEdown', function (e) {/{/*deDesen ('mousedown', function (e) {/{/*deDe thats ('mousedown', function (e) {/{/* *de thats ('mousedown', function (e) {/{/*** deleventener ('mousEdown', function (e) {/{/***** deltaleft = e.clientx-e.target.offsetleft; 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', `Kiri: $ {dx} px; atas: $ {dy} px`)}}) // Pemicu ujung seret harus ditempatkan pada elemen kontrol area main.addeventListener ('mouseup', function (e) {moving = false; console.log ('mouseup');})

Kode CSS

 .cus-canvas {latar belakang: rgb (50, 204, 243);}. input-ele {display: none; Posisi: diperbaiki; Lebar: 180px; Perbatasan: 0; latar belakang-warna: #fff;}

Kode HTML

 <SEV> <CANVAS ID = CANVAS CLASS = CUS-CANVAS WIDE = 800 TINGGI = 600> </CANVAS> <Input ID = Inputele Class = Input-ELE/> </Div>

Kode JS

Prinsip implementasi adalah mencatat posisi gerakan mouse dan terus -menerus menggambar ulang kotak persegi panjang dan konten teks.

 Biarkan 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 rece = {20, can: 20, can: 20, can: 20, can: can: can: can: can: can: can: can: can: can: can. 50}/** Atur teks dan gaya perbatasan*/ctx.font = 16px arial; ctx.fillstyle = #fff; /** Tetapkan sebagai pusat ketika pusat bidang teks akan berada pada titik x filltext*/ctx.textAlign = 'center'; ctx.linewidth = '2'; ctx.strokestyle = '#fff'; strokerect () const inputele = document.getelementById ('inputele'); inputele = i) {ei) {ei); ei); oCpoCeDEnyId ('inputele'); oCutele {ei); 13) {text = inputele.value strokerect () inputele.setAttribute ('style', `display: none`)}} canvas.ondblClick = function (e) {inputele.setAttribute ('style',` left: $ {e. e.clientx} px; $ {playing: $ {playing: $ {E. E. inputele.focus ();} canvas.onmousedown = function (e) { /** Dapatkan jarak antara batas kiri viewport dan batas kiri kanvas ditambah panjang posisi klik mouse dan batas kiri kanvas. Nilai ini adalah nilai yang tidak berubah selama gerakan relatif*/ deltax = e.clientx - rect.x; deltay = e.clienty - rect.y; mousedown = true}; const judgew = cw-rect.width, judheh = ch-rect.height; canvas.onmouseMove = function (e) {if (mousedown) { / ** pengurangan untuk mendapatkan panjang antara batas kiri persegi panjang dan batas kiri Canvas* / let dx = e.clientx; Biarkan dy = e.clienty-deltay; if (dx <0) {dx = 0; } lain jika (dx> judgew) {dx = judgew; } if (dy <0) {dy = 0; } lain jika (dy> judheh) {dy = judheh; } rect.x = dx; rect.y = dy; strokerect ()}}; canvas.onmouseUp = function (e) {mousedown = false}; /** Hapus area yang ditentukan*/fungsi clearrect () {ctx.clearrect (0, 0, cw, ch)}/** Gambar persegi panjang*/fungsi stroker () {clearrect ()/** jika beginpath tidak disebut di sini, rectangle historis akan ditarik ulang*/ctx.begat rect.width, rect.height) ctx.stroke (); // Atur konten font dan posisi di Canvas CTX.FillText (Text, Rect.x + 70, Rect.y + 30);}

Selamat datang untuk berkomunikasi dengan GitHub

Ini adalah artikel tentang dua cara untuk mengimplementasikan posisi konten HTML sesuka hati. Untuk HTML terkait lebih lanjut, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!