كيفية إنشاء قائمة قابلة للسحب باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة السحب والإفلات باستخدام HTML CSS وجافا سكريبت

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة السحب والإفلات باستخدام HTML CSS وجافا سكريبت.

 

السحب والإفلات عبارة عن إيماءة جهاز تعليم يختار فيها المستخدم شيئًا افتراضيًا عن طريق "إمساكه" وسحبه إلى منطقة منفصلة أو إلى شيء افتراضي آخر. Sortable JS هي مكتبة Javascript تتيح لك فرز القوائم أو إعادة ترتيبها عن طريق سحب عناصر القائمة و إفلاتها.

 

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

 

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

 

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

 

قائمة السحب والإفلات أو القائمة القابلة للسحب

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow