Tes: Chrome V80.0.3987.122 Normal
Dua cara adalah: seret posisi label normal atau seret posisi kotak teks di kanvas
1. Menerapkan mouse untuk menyeret elemen label ke posisi apa punAlamat 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');}) 2. Canvas menggambar kotak teks dan mengimplementasikan mouse untuk menyeret dan memindahkannya ke posisi apa punKode 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!