تقنية السحب والإفلات في Android. تقنية السحب والإفلات باستخدام jQuery ما هو السحب والإفلات

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

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

وصف الفكرة

اختر ، انقل ، ضع - الفكرة طبيعية ومريحة. إنه لأمر مدهش ببساطة أنه لم يولد عندما أصبح الماوس ملحقًا لا غنى عنه للكمبيوتر.

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

بالنسبة للمطور ، فإن فكرة "السحب والإفلات" هي معالجة عناصر الصفحة دون إعادة حساب إحداثيات وأحجام العلامات يدويًا ، والقدرة على تحديد عناصر متعددة ومواءمتها ، وتحريك جوانب علامات الحظر.

تعد HTML و CSS لغتين ممتازتين لوصف العلامات وتصميمها ، ولكن عندما يكون لدى المطور القدرة على التعامل مع عناصر الصفحة بشكل تفاعلي دون إعادة حساب الإحداثيات والأحجام يدويًا ، فإن هذا يجعل العمل أكثر راحة وكفاءة.

سهولة نقل الملفات

"السحب والإفلات": الترجمة من الإنجليزية إلى الروسية تبدو حرفياً مثل "السحب والإفلات". من الناحية العملية ، يبدو الأمر أفضل ويعمل بشكل أفضل: اختر ، ونقل ، واتركه - ببساطة وبشكل طبيعي.

يعد تنفيذ عمليات نقل الملفات على صفحة إلى صفحة أو إلى خادم أو لأي استخدام آخر أمرًا بسيطًا للغاية.

الخامس هذا المثالتم تحديد عدة ملفات على سطح المكتب باستخدام الماوس (الشكل الأيسر). عند التحديد ، تم الضغط على زر الفأرة الأيسر و "ذهب" المحدد إلى السلة. أظهر المستعرض نفسه كيف يحدث ذلك ، وكتب تلميح "نسخة" وأنشأ الخطوط العريضة للملفات التي يتم نقلها.

عندما كان الفأر فوق السلة ، أطلق الزائر سراحه الزر الأيسرالماوس ، وقع حدث السحب والإفلات ، وفي صفحة الموقع (الصورة السفلية) ، كان رمز JavaScript قادرًا على تلقي ومعالجة جميع الملفات التي قدمها الزائر إلى الصفحة (الموقع).

وصف التنفيذ

الكود الذي يقوم بهذا الإجراء بسيط للغاية. حتى المطور المبتدئ يمكنه تكراره في أي حالات استخدام.

هنا ، يتم تمثيل واجهة المستخدم بعلامتين: scPlaceFile (هذه هي السلة نفسها حيث تريد وضع الملفات) و scPlaceFiles (هذه نتيجة معالجة الملفات ، وفي هذه الحالة قائمة بها).

منطق الصفحة على النحو التالي. عندما يتم تحميل الصفحة في المتصفح ، يتم تعيين معالج الأحداث "ondrop" في السلة - ضع ، ويتم حظر بقية الأحداث ولا يتم استخدامها.

تعمل الصفحة بشكل طبيعي ، ولكن بمجرد أن يقوم الزائر بتحديد الملف (الملفات) وسحبها إلى صورة السلة ، أي إلى علامة scPlaceFile ، ستتم معالجة حدث "files have been selected".

يعرض هذا المعالج ببساطة قائمة بالملفات. رقمهم في event.dataTransfer.files.length ، والمعلومات حول كل ملف موجودة في event.dataTransfer.files [i] .name. يتم تحديد ما يجب فعله بالبيانات المستلمة من قبل المطور ، وفي هذه الحالة ، يتم تشكيل قائمة بالملفات المستلمة ببساطة.

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

DnD والبيانات الخارجية

يعد تحميل الصور إلى الخادم بطريقة "السحب والإفلات" ممارسة شائعة في هذه التقنية. عادةً ما يقوم المطور بإنشاء نموذج تحميل ملف (1) يعمل بالطريقة المعتادة (2). يمكن للزائر عادة اختيار الملفات وتحميلها.

ومع ذلك ، إذا قام الزائر بالسحب والإفلات إلى مكان معين في النموذج ، فسيتم ملء حقل اسم الملف (الملفات) تلقائيًا.

هذه قرار جيد. من الصعب للغاية بالطبع الاعتراف بعدم وجود فأرة في الكمبيوتر. لكن من الأفضل تصميم واجهة المستخدم بتنسيق الإصدار المعتادوفي تنفيذ DnD.

DnD والبيانات الداخلية

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

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

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

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

البرمجة المرئية واليدوية

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

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

الآن دعونا نلقي نظرة على اختيار عنصر أو عناصر. حقيقة التحديد - مظهر قائمة السياق ، على سبيل المثال ، الهدف هو محاذاة القائمة المحددة (يسار ، يمين ، وسط) ، أو توزيع العناصر عموديًا أو أفقيًا بنفس الخطوة ، أو تغيير حجمها (الحد الأدنى ، الحد الأقصى).

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

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

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

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

بالنسبة لمواقع الويب والإضافات وتطبيقات XUL ، يمكنك تخصيص العناصر التي يمكن أن تصبح جر، نوع التعليقات جرالعناصر المنتجة ، و يسقطعناصر.

تتضمن هذه النظرة العامة على HTML Drag and Drop وصفًا للواجهات والخطوات الأساسية لإضافة دعم السحب والإفلات للتطبيق وملخصًا لقابلية التشغيل البيني للواجهات.

أحداث السحب

ملحوظة:لا يتم تشغيل أحداث pullstart أو pullend عند سحب ملف إلى المتصفح من نظام التشغيل.

واجهات

أساسيات

هذا القسم هو ملخص للخطوات الأساسية لإضافة وظيفة السحب والإفلات إلى أحد التطبيقات.

تحديد ما هو جر

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

هذا العنصر قابل للسحب.

لمزيد من المعلومات، راجع:

تعامل مع القطرة تأثير

معالج حدث الإفلات مجاني لمعالجة بيانات السحب بطريقة خاصة بالتطبيق.

عادةً ما يستخدم التطبيق طريقة getData () لاسترداد عناصر السحب ثم معالجتها وفقًا لذلك. بالإضافة إلى ذلك ، قد تختلف دلالات التطبيق اعتمادًا على قيمة ملف

حيث يتم تنفيذ عناصر واجهة المستخدم الرسومية باستخدام الرسوم الكاذبة) باستخدام الماوس أو شاشة اللمس.

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

الإجراءات الأساسية والأكثر أمثلة بسيطةإجراءات السحب والإفلات هي: تحريك كائن ، وتحريك كائن من لوحة إلى لوحة ، على الرغم من أنها حديثة أنظمة التشغيللقد أصبح السحب والإفلات باستخدام ah على نطاق واسع وهو أحد الطرق الرئيسية للتفاعل مع الكمبيوتر في واجهة مستخدم رسومية.

يمكن أن تكون عناصر الواجهة التالية كائنات للتحريك: أيقونات سطح المكتب (أيقونات) ، وأشرطة أدوات عائمة ، واختصارات البرامج في شريط المهام (بدءًا من Win XP) ، وعناصر TreeView ، وسلسلة نصية ، وخلية DataGridView ، وكذلك عناصر OLE. يمكن أن تتحرك الكائنات داخل منطقة معينة ، وداخل نافذة واحدة ، وبين لوحات نافذة واحدة ، وبين نوافذ مختلفة.

يجب أن يتم تشغيل حدث السحب من خلال بعض إجراءات المستخدم. غالبًا ما يكون هذا الإجراء عبارة عن ضغط زر الماوس الأيسر على عنصر (يسمى هذا الحدث MouseDown) ، والذي يمكن نقله في الحاوية الخاصة به. تحتوي بعض المكونات على أحداث بدء السحب والإفلات الخاصة بها - على سبيل المثال ، يحتوي TreeView على حدث ItemDrag.

مؤسسة ويكيميديا. 2010.

شاهد ما هو "السحب والإفلات" في القواميس الأخرى:

السحب والإفلات- 〈[dræg ənd drɔ̣p] n .؛ ؛ unz. EDV〉 das Anklicken eines Objektes، das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. اسحب "ziehen" + و "und" + drop „down…… Universal-Lexikon

شكل تنفيذ أي إجراءات في واجهات المستخدم الرسومية ، مما يعني الاستخدام فأرة الحاسوب. ترجمت من الإنجليزية تعني حرفيا: السحب والإفلات. يتم تنفيذ الإجراء من خلال التشغيل على الظاهر على الشاشة ... ... مسرد مصطلحات الأعمال

السحب والإفلات- (الحوسبة) لتحريك رمز أو ملف أو ما إلى ذلك عبر الشاشة باستخدام الماوس ثم حرره في مكان مختلف (صفة السحب والإفلات) الإدخال الرئيسي: اسحب ... قاموس إنجليزي مفيد

السحب والإفلات- تقنية المعلومات لنقل شيء ما من منطقة في شاشة الكمبيوتر إلى منطقة أخرى باستخدام الماوس: »يسمح لك البرنامج بسحب وإسقاط عناصر لصور الصفحة والنص وما إلى ذلك. في أي مكان تريد. الإدخال الرئيسي: اسحب ... الشروط المالية والتجارية

السحب والإفلات- فعل بريطاني أمريكي n. الجنرال: ؛ Pl: unz .؛ EDV〉 das Anklicken eines Objektes، das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)