HTML5 اسحب وإسقاط API لتنفيذ رمز المثال لسحب وإسقاط الفرز

يوفر HTML5 API السحب المباشر ، وهو مريح للغاية بالنسبة لنا لتحقيق تأثير السحب والإسقاط. لتحقيق مختلف وظيفة السحب والإفلات.

إذا كنت ترغب في سحب عنصر معين وإسقاطه ، فيجب عليك تعيين الخاصية القابلة للسحب للعنصر إلى True. يتم تعيين عناصر IMG والعناصر بسمات قابلة للسحب إلى True ، والتي يمكن سحبها مباشرة وإسقاطها.

يتم إنشاء حوادث السحب والإفلات بواسطة عناصر مختلفة. يتم سحب عنصر وإسقاطه ، وقد يصل في النهاية إلى العنصر الذي يريد وضعه على العديد من العناصر. هنا ، أشير مؤقتًا إلى عنصر السحب والإفلات وعنصر العملية ، ويسمى العنصر الذي وصلت إليه الكائن الهدف. كائنات مختلفة لها أحداث جر وإسقاط مختلفة.

كائن المصدر:

1. DragStart: يبدأ الكائن المصدر في السحب والإفلات.
2. السحب: أثناء السحب وإسقاط كائن المصدر.
3. السحب: كائن المصدر يسحب ويسقط.

كائن العملية:

1. Dragenter: تبدأ كائنات المصدر في إدخال نطاق العملية.
2. السحب: يتحرك كائن المصدر ضمن نطاق العملية.
3. Dragleave: نطاق كائن المصدر يترك العملية.

الكائن المستهدف:

1. إسقاط: يتم سحب كائن المصدر وإسقاطه في الكائن الهدف.

 <div id = source draggable = true> عنصر </div> <div id = process> عنصر b </div> <div id = target> c element </div> <script> var source = document.getElementById '( "المصدر") ، // عنصر proces = document.getElementByid ('Process') ، // b element target = document.gelementByid ('target') ؛ يتم إنشاء أحداث DragStart بواسطة عنصر A لإنشاء Console.log ("يبدأ العنصر في السحب") ؛} ، خطأ) proces.addeventristener ('dragner' ، function (ev) {// dragenter حدث بواسطة b العنصر. ، خطأ) target.addeventListener ('drop' ، function (ev) {// drop event تم إنشاؤه بواسطة console.log ('A element to element') ؛) ؛) ) ؛} </script>

يتم توفير dataTransfer كائن نقل البيانات في جميع أحداث السحب و -قيود لتمرير البيانات بين كائنات المصدر والكائنات المستهدفة. بعد ذلك ، تعرف على طرق وسمات هذا الكائن لفهم كيفية نقل البيانات.

يتم تخزين هذه الطريقة في كائن datatransfer. تلقي معلمتين ، تشير الأول إلى سلسلة لتخزين نوع البيانات ، ويدعم الآن ما يلي:

1. نص/عادي: نص نص.
2. النص/HTML: نص HTML.
3. النص/XML: نص XML.
4. النص/uri-list: قائمة URL ، كل عنوان URL هو سطر واحد.

المعلمة الثانية هي البيانات المراد تخزينها. على سبيل المثال:

 event.datatransfer.setData ('text/plain' ، 'hello world') ؛

تقرأ هذه الطريقة البيانات من كائن DataTransfer. المعلمة هي نوع البيانات المحددة في setData. على سبيل المثال:

 event.datatransfer.getData ('text/plain') ؛

تزيل هذه الطريقة البيانات المخزنة في كائن DataTransfer. المعلمات اختيارية ، لأنواع البيانات. إذا كانت المعلمات فارغة ، فقم بمسح جميع أنواع البيانات. على سبيل المثال:

 event.datatransfer.cleardata () ؛

تم تعيين هذه الطريقة لسحب وإسقاط الرموز باستخدام عناصر IMG. تلقي المعلمات الثلاثة ، الأول هو عنصر الرمز ، والثاني هو إزاحة المحور X لعنصر الرمز من مؤشر الماوس ، والثالث هو إزاحة y -axis لعنصر الأيقونة من مؤشر الماوس. على سبيل المثال:

 VAR Source = document.getElementByid (Source ") 10 ، -10)} ، خطأ)

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

تجدر الإشارة إلى أن IE لا يدعم كائن DataTransfer. نعم ، بغض النظر عن إصدار IE مدعوم.

استخدام واجهات برمجة التطبيقات السحب والإفلات على دراية بما سبق. لنلقي نظرة على الفكرة أولاً:

1. في قائمة واحدة ، يمكن سحب كل عنصر وإسقاطه ، ويتم ضبط الخاصية القابلة للسحب على كل عنصر.
2. مسح حدث DragStart لكل عنصر لتمييز نمط كائن المصدر.
3. عند مراقبة حدث Dragenter لكل عنصر ، عندما يدخل كائن المصدر العنصر الحالي ، تتم إضافة كائن المصدر قبل العنصر. وبهذه الطريقة ، سيتم الضغط على العناصر التي تقف وراءها من قبل كائن المصدر ، وتحقيق تأثير الفرز.
4. ومع ذلك ، سيجد أنه لا يمكن تصنيف كائن المصدر إلى آخر ، ولا يمكن أن يكون سوى الثاني في القلم قبل الأخير. في هذا الوقت ، تتم مراقبة حدث DragLeave.

الرمز الرئيسي هو كما يلي:

 var source = document.queryselectiverall ('. list') ، dragelement = null ؛ ) {dragelement = this ؛} ، source) ؛ ] ) ؛} ، false)} ؛

عنوان الرمز الكامل: Drag-Demo

إنه متوافق بشكل أساسي في IE ، ولكن على الأقل يمكن سحبه وفرزه على الأقل في IE10.

وفي اختباري البسيط ، وجد أنه عندما لا يتم تعيين العناصر في IE ، فلن يتم تشغيل حدث DragLeave.

النقطة الأكثر أهمية هي على iOS و Android ، وهو أمر غير متوافق تمامًا. لحسن الحظ ، هناك سدادة لجعلها متوافقة تمامًا مع نهاية الهاتف المحمول.

العنوان المكون الإضافي: IOS-HTML5-DRAG-DROP-SHIM

تحتاج فقط إلى تقديم المكونات -في الكود الأصلي لسحبه على محطة الهاتف المحمول.

 <script> var iosdragdropshim = {enablenerLave: true} </script> <script src = pendor/ios-drop.js> </script>

ما سبق هو كل محتويات هذا المقال.