طريقتان لتنفيذ HTML لسحب موضع المحتوى بشكل عشوائي

الاختبار: Chrome V80.0.3987.122 Normal

طريقتان هما: اسحب موضع التسمية العادي أو اسحب موضع مربع النص في قماش

عنوان العرض التوضيحي

رمز CSS

 #range {الموضع: النسبي ؛ العرض: 600 بكسل ؛ الارتفاع: 400 بكسل ؛ الهامش: 10px ؛ خلفية اللون: RGB (133 ، 246 ، 250) ؛}. أيقونة {الموضع: absolute ؛ الارتفاع: 100px ؛ العرض: 100px ؛ المؤشر: تحرك. لون الخلفية: #ff9204 ؛ تخطي المستخدم: لا شيء ؛}

رمز HTML

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

رمز JS

 const main = document.getElementById ('Range') ؛ const icon = document.queryselector ('. icon') ؛ دعنا move = false ؛ دع deltaleft = 0 ، deltatop = 0 ؛ = e.clientx-e.target.offsetleft ؛ بالنسبة للعنصر الأصل*/ دع dx = cx - deltaleft اسمحوا dy = cy - deltatop/ ** منع ما وراء نطاق العنصر الأصل*/ if (dx <0) dx = 0 if (dy <0) dy = 0 if (dx> 500) dx = 500 if (dy> 300) dy = 300 icon.settribute `يسار: $ {dx} px ؛ top: $ {dy} px`)}}) console.log ('mouseup') ؛})

رمز CSS

 .cus-canvas {background: rgb (50 ، 204 ، 243) ؛}. input-ele {display: none ؛ الموقف: ثابت ؛ العرض: 180 بكسل ؛ الحدود: 0 ؛ لون الخلفية: #fff ؛}

رمز HTML

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

رمز JS

يتمثل مبدأ التنفيذ في تسجيل موضع حركة الماوس وإعادة رسم المربع المستطيل والمحتوى النصية باستمرار.

 دع mousedown = false ؛ دع deltax = 0 ؛ دع deltay = 0 ؛ دع text = 'hello'const canvas = document.getElementById (' canvas ') ؛ const ctx = canvas.getContext (' 2d ') ؛ نصي ونمط الحدود*/ctx.font = 16px arial ؛ ctx.fillstyle = #fff ؛ /** تم تعيينه كمركز عندما يكون مركز حقل النص في نقطة X من FillText*/ctx.textalign = 'center' ؛ ctx.linewidth = '2' ؛ ctx.strokestyle = '#fff' text = inputele.value strokerect () inputele.setattribute ('style' ، `display: none`)}} canvas.ondblclick = function (e) {inputele.setattribute ('style' ،` left: $ {e.clientx} px ؛ top: $ {e.clienty} px ؛ inpectele.focus () ؛} canvas.onmousedown = function (e) { /** احصل على المسافة بين الحدود اليسرى من منفذ العرض والحدود اليسرى من القماش بالإضافة إلى طول موضع النقر بالماوس والحدود اليسرى للقطن. هذه القيمة هي القيمة غير المتغيرة أثناء الحركة النسبية*/ deltax = e.clientx - rect.x ؛ deltay = e.clienty - rect.y ؛ mousedown = true} ؛ const judgew = cw-rect.width ، judgeh = ch-rect.height ؛ canvas.onmouseMove = function (e) {if (mousedown) { / ** اطرح للحصول على الطول بين الحدود اليسرى للمستطيل والحدود اليسرى من القماش* / let dx = e.clientx-deltax ؛ دع 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 ()/** إذا لم يسمى startpath هنا ، فإن المستطيل التاريخي سيتم إعادة رسمه*/ctx.beginpath rect.Height) ctx.stroke () ؛ // قم بتعيين محتوى الخط والموضع الموجود على Canvas ctx.filltext (النص ، rect.x + 70 ، rect.y + 30) ؛}

مرحبًا بك في التواصل مع جيثب

هذه هي المقالة حول طريقتين لتنفيذ موضع محتوى HTML في الإرادة. لمزيد من HTML في الإرادة ، يرجى البحث عن المقالات السابقة من wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!