تعد واجهة برمجة تطبيقات السحب والإسقاط ميزة جديدة في HTML5، مقارنة بالميزات الجديدة الأخرى، فهي تمثل 60% من الأهمية و30% من الاستخدام في التطوير الفعلي، ومتطلبات التعلم كافية فقط لإتقانها.
2. ما هو السحب والإفراج؟اسحب: اسحب
الافراج: إسقاط
السحب يعني أن الماوس ينقر على الكائن المصدر ويستمر في تحريك الكائن دون تركه، وبمجرد تركه، يتم تحريره.
3. ما هي الكائنات المصدر والكائنات المستهدفة؟الكائن المصدر: يشير إلى الشيء الذي ننقر عليه بالماوس، ويمكن أن يكون صورة، أو DIV، أو قطعة من النص، وما إلى ذلك.
الكائن الهدف: يشير إلى الوقت الذي نقوم فيه بسحب الكائن المصدر ونقله إلى منطقة ما. يمكن للكائن المصدر الدخول إلى هذه المنطقة، والتمرير فوق هذه المنطقة (دون تركها)، وتحرير الكائن المصدر هنا (لقد تركته بالفعل). يمكن أيضًا مغادرة المنطقة بعد التحليق.
4. الوظائف ذات الصلة لواجهة برمجة تطبيقات السحب والإسقاطبعد شرح ماهية الكائن المصدر والكائن الهدف، دعنا نعود إلى واجهة برمجة تطبيقات السحب والإفلات في الواجهة الأمامية، يمكننا استخلاص عدة وظائف من العمليات المذكورة أعلاه
الأحداث التي يمكن تشغيلها بواسطة الكائن المصدر المسحوب:
(1) عند السحب: يبدأ سحب الكائن المصدر
(2) ondrag: يتم سحب الكائن المصدر (قد يتحرك الماوس أو لا يتحرك)
(3)ondragen: يتم سحب الكائن المصدر إلى النهاية
اسحب الكائن المصدر لإدخال الأحداث التي يمكن تشغيلها بواسطة الكائن الهدف أعلاه:
(1)ondragenter: يتم سحب الكائن الهدف إلى الكائن المصدر
(2) ondragover: يتم سحب الكائن الهدف بواسطة الكائن المصدر ويتم تحريكه فوقه.
(3) ondragleave: يتم سحب الكائن المصدر بعيدًا عن الكائن الهدف
(4) ondrop: يتم سحب الكائن المصدر وتحريره/تركه فوق الكائن الهدف.
تحتوي واجهة برمجة تطبيقات السحب والإسقاط على إجمالي 7 وظائف! !
5. كيفية نقل البيانات بين حدث الكائن المصدر المسحوب وحدث الكائن الهدفيوفر HTML5 سمة جديدة لجميع الأحداث المتعلقة بالسحب:
e.dataTransfer { } //数据传递对象
الوظيفة: تستخدم لتمرير البيانات بين أحداث الكائن المصدر والكائن الهدف
حفظ البيانات في معالج الأحداث على الكائن المصدر:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
قراءة البيانات في معالج الأحداث على الكائن الهدف:
var v = e.dataTransfer.getData(k);
مثال 1: تنفيذ طائرة صغيرة يمكنها التحرك أثناء سحب الماوس
نصيحة: يجب أن تكون الطائرة في مكانها الصحيح! احصل على القيمة الإحداثية للماوس في حدث ondrag! ! !
الرمز هو كما يلي:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> الجسم{ الهامش:0; } img{ الموضع:مطلق } </style> </head> <body> <h3>مستوى صغير يتحرك أثناء سحب الماوس</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('يبدأ مصدر الحدث p3 في السحب'); .ondrag=function(e){ console.log('يتم سحب مصدر الحدث p3'); console.log(x+'-'+y); // في اللحظة الأخيرة من حدث السحب، لا يمكن قراءة إحداثيات الماوس، ويصبح كل من pageX وpageY 0 if(x==0 && y==0 ){ return // لا تتعامل مع الموقف الذي يكون فيه كل من X و Y 0 في آخر لحظة من السحب} x-=offsetX; أعلى=y+'px' } p3.ondragen=function(){ console.log('انتهاء سحب الكائن المصدر p3'); } </script> </body> </html>التأثير هو كما يلي:
المثال الثاني:
يحاكي تأثير سلة المهملات في الكمبيوتر، ويتم عرض إجمالي ثلاث مستويات صغيرة بعد سحب مستوى صغير فوق سلة المهملات، ويتم حذف المستوى الصغير من شجرة DOM.
نصيحة: يتطلب الحذف إزالة العنصر من عقدة DOM الفرعية، ويجب منع السلوك الافتراضي لـ ondragover! ! استخدم نقل البيانات بين الكائن المصدر والكائن الهدف لتسجيل قيمة معرف الطائرة الصغيرة! ! !
معلومات هامة:
ondragover لديه سلوك افتراضي! ! ! وذلك عندما يتم تشغيل ondragover، سوف يفشل ondrop! ! ! ! قد تكون هذه مشكلة في إصدار المتصفح، والتي لا يمكن حلها إلا إذا تم تحديث المتصفح باستمرار في المستقبل! !
كيفية إيقافه؟
ondragover= function(e){ // عندما يحوم الكائن المصدر فوق الكائن الهدف e.preventDefault(); // منع السلوك الافتراضي حتى يمكن تشغيل هذا الإسقاط...}ondrop= function(e){ // The يتم تحرير الكائن المصدر في الكائن الهدف...}الرمز هو كما يلي:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>احذف العناصر الفرعية من شجرة DOM بعد سحب المستوى إلى سلة المهملات</h3> <img id=trash; src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 class =src src=img/p5.png> <script> // أضف الاستماع إلى الحدث للكائن المصدر - سجل الكائن المصدر الذي تم سحبه var srcList = document.querySelectorAll('.src');// ابحث عن جميع عناصر img for(var i=0; i<srcList.length; i++){ // اجتياز عناصر img var p = srcList[i]; = function(e){ // ابدأ في سحب الكائن المصدر e.dataTransfer.setData('PlaneID',this.id); p.ondrag = function(){} p.ondragen = function(){} } // أضف الاستماع إلى الحدث للكائن الهدف - احذف الكائن المصدر المسحوب Trash.ondragenter = function(){ // يدخل الكائن المصدر إلى الهدف وحدة تحكم الكائن .log('drag enter'); اسحب الإجازة') ؛ المهملات.style.opacity = .2; // تغيير الشفافية إلى 0.2 } المهملات.ondragover= function(e){ // الكائن المصدر يحوم فوق الكائن الهدف e.preventDefault(); إسقاط قابل للتشغيل} المهملات.ondrop= function(e){ // يتم تحرير الكائن المصدر في الكائن الهدف console.log('drop');trash.style.opacity = .2; // احذف الكائن المصدر المسحوب var id = e.dataTransfer.getData('PlaneID'); // احصل على قيمة معرف البيانات var p = document.getElementById(id); // ابحث عن العناصر ذات الصلة بناءً على قيمة المعرف p. parentNode.removeChild(p); //إزالة العقد الفرعية من العنصر الأصلي} </script> </body> </html>التأثير هو كما يلي:
بعد سحب الطائرة الصغيرة إلى سلة المهملات لحذفها:
كما هو موضح في الصورة، كانت هناك في الأصل ثلاث طائرات صغيرة، ولكن الآن هناك اثنتين! ! !
6. نقاط المعرفة التكميلية حول السحب والإسقاط API! ! (مهم قد يتم سؤالك أثناء المقابلة!!)أسئلة المقابلة:
كيفية عرض صورة من العميل (الكمبيوتر) في صفحة ويب؟
كيفية سحب صفحة الويب الخاصة بالعميل لعرضها في الصفحة التي تم تنزيلها من جانب الخادم؟
ماذا يعني هذين السؤالين؟
نقوم عادةً بسحب وإسقاط صورة من الكمبيوتر إلى المتصفح لتنفيذ عملية التنزيل! ! ! وفقًا للمعايير السابقة لـ H5، من المستحيل سحب وإسقاط صورة مباشرة في المتصفح لعرضها! ! ولكن منذ ظهور الميزات الجديدة لـ H5، تمت إضافة ميزة السحب والإسقاط API، والتي تحقق هذه الوظيفة بشكل مثالي! ! !
مناسبات التطبيق:
على موقع ويب معين، قم بتحميل صورة كصورة رمزية
تحميل الصورة...
كائنات تشغيل الملفات الجديدة في HTML5:
ملف: يمثل كائن ملف
FileList: يمثل كائن قائمة الملفات، مثل المصفوفة
FileReader: يستخدم لقراءة البيانات من الملفات
FileWriter: يستخدم لكتابة البيانات إلى الملفات
الوظائف ذات الصلة:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; // ابحث عن الملف المسحوب والمسقط var fr = new FileReader(); // إنشاء قارئ ملفات fr.readAsURLData(f); // اقرأ محتوى الملف fr.onload = function(){ // اكتملت القراءة img.src = fr.result; // استخدم بيانات القراءة } }الرمز هو كما يلي:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px Solid #aaa؛ نصف قطر الحدود: 3 بكسل؛ الهامش: 10 بكسل؛ </style> </head> <body> <h1>معرفة موسعة بواجهة برمجة تطبيقات السحب والإفلات</h1> <h3>يُرجى سحب صورتك إلى منطقة المربع أدناه</h3> <div id=container></ div > <script> // استمع إلى حدث إسقاط المستند - قم بإلغاء سلوكه الافتراضي: افتح الصورة في نافذة جديدة document.ondragover = function(e){ e.preventDefault(); // تمكين تشغيل حدث الإسقاط } document.ondrop = function(e){ e.preventDefault(); // منع فتح الصورة في نافذة جديدة، وإلا ستستمر عملية التنزيل! ! ! } // استمع إلى حدث الإسقاط الخاص بـ div#container، وحاول قراءة بيانات الصورة التي تم إصدارها وعرضها Container.ondragover = function(e){ e.preventDefault(); } Container.ondrop = function(e){ console.log(e). .log ("قام العميل بسحب صورة وأطلقها...") // يقرأ الكائن الهدف الحالي البيانات المخزنة في كائن مصدر السحب والإفلات //console.log(e.dataTransfer); // عرض مشكلة //console.log(e.dataTransfer.files.length); // عدد الصور المسحوبة var f0 = e.dataTransfer.files[0];//console.log(f0); / ملف كائن الملف // قراءة البيانات من كائن الملف var fr = new FileReader() //fr.readAsText(f0); // قراءة السلسلة النصية من الملف fr.readAsDataURL(f0); // قراءة بيانات URL من الملف fr.onload = function(){ console.log('اكتملت قراءة الملف') console.log(fr.result); // بيانات URL Container.appendChild(img } } </script> </body> </html></span>التأثير هو كما يلي:
تلخيصما ورد أعلاه هو شرح تفصيلي للأمثلة الكلاسيكية لواجهة برمجة تطبيقات السحب والإفلات بتنسيق HTML5 التي قدمها المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيرد عليك المحرر في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!