إضافة السحب والإسقاط إلى موقع الويب بسهولة مع Dragula
تبحث عن مكتبة مجانية ل التعامل مع السحب والإفلات الميزات? ثم Dragula هو المورد الوحيد الذي ستحتاجه.
يتيح لك هذا البرنامج النصي المجاني أضف ميزات السحب والإفلات لأي عنصر في صفحتك. يتضمن ذلك دعمًا لأطر React & AngularJS ، إلى جانب برنامج الفانيليا JavaScript.
Dragula سهل الإعداد للغاية ويأتي معه مجموعة من المشغلات المخصصة لسلوكيات المستخدم. هذا يعني أنه يمكنك تشغيل وظائفك الخاصة بعد قيام المستخدم بسحب عنصر ما أو النقر فوق عنصر ما أو إعادة ترتيب أي جزء من الصفحة.
إذا كنت تأخذ نظرة خاطفة على عرض حي ستجد بعض مقتطفات الكود, مع عينات قابلة للاستخدام.
إعداد Dragula يتطلب فقط ملف جافا سكريبت واحد للحصول عليه العمل. على الرغم من أن الخيارات الإضافية يمكن أن تصبح مربكة بعض الشيء.
على سبيل المثال ، دعنا نقول أن لديك حاويتين, #اليسار و #حق, أنك تريد دعم العناصر القابلة للسحب. سوف تحتاج إلى أضف هذه الحاويات يدويًا إلى وظيفة Dragula لدعم أساليب السحب والإفلات.
إذا لم يكن لديك فهم قوي لأساسيات تطوير الواجهة الأمامية ، فستجد صعوبة في استخدام Dragula. ولكن ، ريبو جيثب لديه الكثير من أمثلة رائعة يمكنك اتباعها مع و حتى مقتطفات الكود يمكنك نسخها.
إليك عينة واحدة من مستندات GitHub لمعرفة كيفية القيام بذلك استهدف الحاويات (اليسرى واليمنى):
dragula ([document.querySelector ('# left') ، document.querySelector ('# right')]) ؛ لاحظ إذا نظرت إلى صفحة GitHub التي ستجدها قائمة ضخمة من الخيارات يمكنك تمرير لهذه الوظيفة.
يمكنك اختيار سواء لنسخ أو نقل العناصر, أي حاوية (حاويات) تدعم العناصر المسحوبة و حتى وظائف رد الاتصال التي تعمل من خلال سلوكيات المستخدم المختلفة مثل:
- تحوم فوق الحاوية
- انقر فوق وسحب الحدث الأولي
- إسقاط الحدث
- إسقاط عنصر خارج الحدود
- استنساخ عنصر / حاوية عن طريق السحب
هذه المكتبة سوف يستغرق بعض العمل الأولي ولكن إذا كنت معتادًا على جافا سكريبت ، فيجب أن يكون غير ذكي.
نظرة على الصفحة التجريبية ل انظر كيف يعمل و ل الحصول على بعض الأفكار عينة التعليمات البرمجية. Dragula هي مكتبة ضخمة وربما تكون أفضل برنامج نصي مفتوح المصدر التعامل مع السحب والإفلات ، مع أوسع مجموعة من التخصيص.
