أنا سعيد قليلاً اليوم. تحتوي مدونة CSDN على أكثر من 10000 مشاهدة. لم يكن لدي أي عدد كبير من المشاهدات في الماضي. يجب أن أقول إنني ما زلت طموحًا بعض الشيء ، لكن ما زلت لا أستطيع إلا أن أكون سعيدًا عندما أرى هذا التشجيع. على الأقل ، هذا يجعلني أشعر بأنني شخص في الصناعة. أنا لست وحدي.
بدون مزيد من اللغط ، تابع تسجيل اليوم ، وقم بتسجيل علامات السحب ، وتحليلها من العملية:
1. لإعادة تشغيل علامات السحب ، يجب عليك أولاً تسجيلها ؛
2. لتسجيل آثار السحب ، يجب تنفيذ السحب ؛
تم إجراء هذه المشكلة قبل بضعة أيام ، وكانت معيبة قليلاً في ذلك الوقت ، لكن طريقة التنفيذ العامة كانت واضحة ، لذلك أدركت اليوم هذه المشكلة بشكل أسرع بكثير. كنت سعيدا حقا. بعد أن أدركت ذلك مرة أخرى اليوم ، فهمت ذلك بشكل أعمق قليلاً ، لذلك سأسجلها اليوم ؛
بالنسبة لتسجيل آثار السحب ، سيكون هذا التحليل قصيرًا ، بعد كل شيء ، لقد فعلت ذلك مرة واحدة:
1. تحديد الموضع الحالي وحالة DIV لضمان استخدام المطلق للسحب ؛
2. استمع إلى أحداث سحب الماوس (تم تلخيص العديد من أحداث الماوس أمس) ؛
3. قم بإجراء استجابة مماثلة بناءً على حدث الماوس المقابل وتسجيل النقاط التي توجد فيها DIV في السحب والإفلات من OnMousemove ؛
4. استمع إلى حدث ترتد الماوس لإنهاء حدث السحب وسجل النقطة
على أي حال ، دعنا ننفذ الكود التالي أولاً (يتم سرد جميع الرموز هنا في نفس الوقت وتحليلها واحدًا تلو الآخر):
لغة HTML:
<div id = "showzone"> </viv> // هذا لا يزال مألوفًا جدًا <a href = "#" style = "الموضع: المطلق ؛ الهامش-توب: 100px ؛ اللون: أصفر ؛ خلفية اللون: أحمر ؛"
جزء JavaScript:
window.onload = function () {var obj = document.getElementById ("showzone") ؛ var disx = disy = 0 ؛ var dragif = false ؛ var position = [{x: obj.offsetleft ، y: obj.offsettop}] obj.onmousedown = function (event) {var event = event || window.event ؛ disx = event.clientx-obj.offsetleft ؛ // مسافة الماوس إلى div الحدود disy = event.clienty-Obj.offsettop ؛ dragif = true ؛ // موقع العلم. } ؛ document.onmousemove = function (event) {if (! dragif) return ؛ // هذا الحكم مهم للغاية ، فقط الحركة المضغوطة يمكن أن تكون صالحة var event = event || window.event ؛ var nowx = event.clientx-disx ؛ // وفقًا لمسافة الماوس المسجلة أعلاه إلى div ، يمكنك معرفة مسافة div إلى صفحة الويب var nowy = event.clienty-disy ؛ var maxx = document.documentElement.clientwidth-obj.offsetwidth ؛ // هذا هو الإزاحة ، وهو عرض div ، لا يتم تعويضه var maxy = document.documentElement.Clientheight-Obj.offseTheight ؛ nowx = nowx <0؟ 0: nowx ؛ // هذه الأحكام هي فقط للحكم على أنه لا يوجد حدود nowy = nowy <0؟ 0: nowy ؛ nowx = nowx> maxx؟ maxx: nowx ؛ nowy = nowy> maxy؟ maxy: nowy ؛ obj.style.margintop = obj.style.marginleft = 0 ؛ obj.style.left = nowx+"px" ؛ // لا تنسى+"px" ، فقط style.left/top هو obj.style.style.top = nowy+"px" مع "px" ؛ position.push ({x: nowx ، y: nowy}) ؛ // record obj.innerhtml = "X:"+Nowx+"y: } ؛ document.onmouseup = function () {dragif = false ؛ // السحب والتسجيل obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop ؛ } ؛ oa.onclick = function () {if (position.length == 1) return ؛ // عندما يكون هناك واحد فقط ، فهذا يعني أنه لم يتم نقل مؤقت VAR. = setInterval (function () {var opos = position.pop () ؛ opos؟ (obj.style.left = opos.x + "px" ، obj.style.top = opos.y + "px"): clearinterval (timer) ؛ // أخرى مدهشة من هذه الكتابة} ، 30) ؛ العودة كاذبة } ؛ } ؛بعض النقاط الرئيسية للانتباه إلى:
1. صفيف الموضع var ، مجموعة من النقاط: هذه النقطة هي النقطة المتحركة في الركن الأيسر العلوي من DIV ، أي أن مسار الحركة الذي نسجله هو في الواقع مجموعة من النقاط في الزاوية اليسرى العليا من DIV ، والمواصلة هي الإحداثيات X ، و Offsettop هو الإحداثيات y ، أنت تعرف كيفية رسم المحور الإحداثي ؛
2. عدة أطوال أو مسافات تظهر في البرنامج: OffsteLft ، ClientX ، OffsetWidth ، style.left ، document.documentElement.clientwidth ، إلخ.
3. push () الطريقة: أضف عناصر إلى نهاية الصفيف ، وتغيير طول الصفيف ، والنهاية ؛
4. طريقة البوب (): حذف وإرجاع العنصر الأخير من الصفيف. هناك نقطتان رئيسيتان ، واحدة: إرجاع العنصر الأخير ؛ الآخر: حذف العنصر ، ويصبح طول الصفيف أصغر ؛
وبهذه الطريقة ، أدركنا التشغيل المتخلف ، لذلك ليست هناك حاجة إلى ذكر مبدأ التنفيذ. إذا كان لدينا تشغيل مباشر ، هل يجب أن نحصل على القيمة الأولى من المصفوفة وحذفها؟ هاها ، حاول أن تكتب وقراءتها.
يجب أن أقول أنه من الراحة أكثر أن السحب مع الماوس. من غير المريح تحريك لوحة المفاتيح. يمكنك السحب والسحب مع الماوس بدقة ... السماء بالفعل في حالة ذهول وستكون الجو حارًا ، لكن اليوم على ما يرام ...