สองวิธีในการใช้ HTML เพื่อลากตำแหน่งเนื้อหาแบบสุ่ม

ทดสอบ: Chrome V80.0.3987.122 ปกติ

สองวิธีคือ: ลากตำแหน่งฉลากปกติหรือลากตำแหน่งกล่องข้อความในผืนผ้าใบ

ที่อยู่สาธิต

รหัส CSS

 #Range {ตำแหน่ง: ญาติ; ความกว้าง: 600px; ความสูง: 400px; มาร์จิ้น: 10px; พื้นหลังสี: RGB (133, 246, 250);}. ไอคอน {ตำแหน่ง: สัมบูรณ์; ความสูง: 100px; ความกว้าง: 100px; เคอร์เซอร์: ย้าย; พื้นหลังสี: #FF9204; ผู้ใช้เลือก: ไม่มี;}

รหัส HTML

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

รหัส JS

 const main = document.getElementById ('range'); const icon = document.querySelector ('. icon'); ให้ย้าย = false; ให้ deltaleft = 0, deltatop = 0; // เหตุการณ์เริ่มต้นการลากจะถูกผูกไว้กับไอคอนองค์ประกอบที่ย้าย Deltaleft = e.clientx-e.target.offsetleft; รับตำแหน่งของการเคลื่อนไหวที่สัมพันธ์กับองค์ประกอบหลัก*/ ปล่อยให้ dx = cx - deltaleft ให้ dy = cy - deltatop/ ** ป้องกันไม่ให้เกินช่วงองค์ประกอบหลัก*/ ถ้า (dx <0) dx = 0 ถ้า (dy <0) dy = 0 ถ้า (dx> 500) dx = 500 ถ้า (dy> 300) dy = 300 `left: $ {dx} px; top: $ {dy} px`)}}) // ทริกเกอร์การลากปลายจะถูกวางไว้บนองค์ประกอบควบคุมพื้นที่ Main.addeventListener ('Mouseup', ฟังก์ชั่น (e) {move = false; console.log ('mouseup');})

รหัส CSS

 .CUS-CANVAS {พื้นหลัง: RGB (50, 204, 243);}. input-Ele {display: none; ตำแหน่ง: แก้ไข; ความกว้าง: 180px; ชายแดน: 0; พื้นหลังสี: #FFF;}

รหัส HTML

 <div> <canvas id = canvas class = cus-canvas width = 800 height = 600> </canvas> <input id = inputele class = input-ele/> </div>

รหัส JS

หลักการใช้งานคือการบันทึกตำแหน่งของการเคลื่อนไหวของเมาส์และวาดใหม่อย่างต่อเนื่องกล่องรูปสี่เหลี่ยมผืนผ้าและเนื้อหาข้อความ

 ให้ mousedown = false; ให้ deltax = 0; ให้ deltay = 0; ให้ข้อความ = 'hello'const canvas = document.getElementById (' Canvas '); const ctx = canvas.gatcontext (' 2d '); cw = canvas.width, ch = canvas.height; ตั้งค่าข้อความและสไตล์เส้นขอบ*/ctx.font = 16px arial; ctx.fillstyle = #fff; /** ตั้งเป็นศูนย์กลางเมื่อศูนย์กลางของฟิลด์ข้อความจะอยู่ที่จุด x ของ filltext*/ctx.textalign = 'center'; ctx.lineWidth = '2'; ctx.strokestyle = '#fff'; strokerect () constaplele = document.getElementByid ('inputele inputele.value strokerect () inputele.setAttribute ('style', `display: none`)}} canvas.ondblclick = function (e) {inputele.setAttribute ('สไตล์',` ซ้าย: $ {e.clientx} px; inputele.focus ();} canvas.onmousedown = function (e) { /** รับระยะห่างระหว่างขอบเขตด้านซ้ายของวิวพอร์ตและขอบเขตด้านซ้ายของผืนผ้าใบบวกกับความยาวของตำแหน่งคลิกเมาส์และขอบเขตด้านซ้ายของผืนผ้าใบ ค่านี้เป็นค่าที่ไม่เปลี่ยนแปลงในระหว่างการเคลื่อนไหวสัมพัทธ์*/ deltax = e.clientx - rect.x; deltay = e.clienty - rect.y; mousedown = true}; const judgew = cw-ect.width, judgeh = ch-ect.height; canvas.onmousemove = function (e) {ถ้า (mousedown) { / ** การลบเพื่อให้ได้ความยาวระหว่างขอบเขตด้านซ้ายของรูปสี่เหลี่ยมผืนผ้าและขอบเขตด้านซ้ายของผืนผ้าใบ ให้ dy = e.clienty-deltay; if (dx <0) {dx = 0; } อื่นถ้า (dx> judgew) {dx = judgew; } if (dy <0) {dy = 0; } อื่นถ้า (dy> judgeh) {dy = judgeh; } rect.x = dx; rect.y = dy; Strokerect ()}}; canvas.onmouseup = function (e) {mousedown = false}; /** ล้างพื้นที่ที่ระบุ*/ฟังก์ชั่น clearrect () {ctx.clearrect (0, 0, cw, ch)}/** วาดรูปสี่เหลี่ยมผืนผ้า*/ฟังก์ชั่น strokerect () {clearrect ()/** หากไม่ได้เรียกว่าจุดเริ่มต้นที่นี่ rect.width, rect.height) ctx.stroke (); // ตั้งค่าเนื้อหาตัวอักษรและตำแหน่งบน Canvas CTX.FillText (text, rect.x + 70, rect.y + 30);}

ยินดีต้อนรับสู่การสื่อสารกับ GitHub

นี่คือบทความเกี่ยวกับสองวิธีในการใช้ตำแหน่งเนื้อหาของ HTML ตามความประสงค์ สำหรับ HTML ที่เกี่ยวข้องมากขึ้นตาม Will โปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!