بعد أن جئت إلى DRAG و DROP لأول مرة ، صادفت وصفًا صعبًا للغاية له (هذا رأيي الشخصي. أطلب منك عدم الاتفاق معه ، ولكن إعادة قراءة كل ما هو ممكن والنظر في هذا السؤال من عدة زوايا). وقررت أن أكتب بضع مقالات تهدف إلى بدء المطورين الذين يرغبون في تعلم Zen.
ستتألف المقالة من جزأين:
- طريقة لإنشاء تأثيرات DRAG و DROP.
- تطبيق عملي للمعرفة المكتسبة لإنشاء فرز باستخدام DRAG و DROP
الفقرة رقم 1 طريقة إنشاء تأثير DRAG و DROP
قبل البدء في تحليل عميق ، دعونا ننظر بشكل سطحي. تخيل نفسك كمحمل ، تحتاج إلى نقل مربع من مكان إلى آخر. بالنسبة للجرافة ، "حسنًا ، لقد أخذتها جيدًا ، لقد نقلتها. تم! "، وبالنسبة للمبرمج ،" ذهبت إلى الصندوق ، انحنى ، أخذت الصندوق ، التقطت الصندوق ، مشيت N الدرجات ، انحنى ، اترك المربع ". أعني ، قبل البدء في العمل ، أن تفقد كل شيء في رأسك ، في خطوات وستصبح أقرب إلى الحقيقة.
أريد أن أبدي تحفظًا بوجود عدة طرق لإنشاء هذا التأثير وتأكد من قراءة الكل. سأستفيد من ذلك الذي أعتبره الآن الأكثر ملاءمة.
عند إنشاء DRAG و DROP ، تتمثل الخطوة الأولى في تعيين الكائن الذي سننتقل إليه إلى draggable = 'true'.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
.
في المرحلة الأولى ، أريد أن أوضح العملية نفسها ، وبعد ذلك سنقوم بنشرها على جميع الكائنات. نحن نعمل حاليًا في JS ، وكما تعلم ، هناك العديد من الأحداث في المتصفح والتي يمكننا إرفاق تسلسل الإجراءات الخاصة بها. دعونا نلقي نظرة على الأحداث اللازمة لإنشاء DRAG و DROP:
dragstart - يحدث عندما يبدأ المستخدم في سحب عنصر.
السحب - يحدث عندما يتم سحب عنصر.
dragend - يحدث عندما ينتهي المستخدم من سحب العنصر.
dragenter - يحدث عندما يضرب العنصر
المسحوب الهدف.
dragleave - يحدث عندما يترك العنصر
المسحوب الهدف.
السحب - يحدث عندما يكون العنصر
المسحوب أعلى الهدف.
يحدث - عندما يحدث العنصر الذي يتم سحبه على الهدف.
الآن معلومات مهمة جدا! يتم تقسيم الأحداث إلى مجموعتين. بالنسبة للعنصر الذي تم نقله (العنصر الذي نسحبه): dragstart ، Drag ، Dragend. بالنسبة للعنصر المتلقي (حيث نسحبه): Dragenter ، Dragleave ، Dragover ، Drop. وهذه الأحداث لا يمكن أن تعمل في الاتجاه المعاكس ، لكنها يمكن أن تعمل دون بعضها البعض.
على سبيل المثال: تحتاج إلى تحريك الكائن وتركه حيث أصدرنا زر الماوس. هذه المهمة لا تتطلب جزء مضيف.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
مما لا شك فيه ، يتم المثال على الركبة ، لكنه يوضح تمامًا خيار الكائن المستقبل.
أضع في الاعتبار الأمثلة ذات الأحداث المنفصلة مقابل لا شيء ، لأنه في السطر
d1.addEventListener ('dragstart' ، function () { يمكنك استبدال 'dragstart' بأي حدث آخر ، يمكنك اللعب به والحصول على نتائج مثيرة للاهتمام. واللعب وإظهار ما بدا غير عادي ومثير للاهتمام لك في التعليقات ، حتى يتعلم الجميع الكثير ويمكن أن يكرر ذلك بنفسه.
الفقرة رقم 2. DROP لا يعمل في DRAG و DROP
عند تجربة كل الأحداث ، ستجد أن هذا السقوط لا يعمل. إن مطوري هذه الطريقة هم الذين يصنعون atat لأولئك الذين يقررون "وهذا كل شيء ... هاه ، هراء."
حسنًا ، كل شيء بسيط ، قبل حدث الإسقاط ، تحتاج إلى تعليق حدث على نفس العنصر
d2.addEventListener('dragover',function() { event.preventDefault(); });
خذ هذا كحقيقة ؛ إنها لن تعمل بدونها.