قم بتحديث DOM أثناء سحب عنصر قابل للفرز

Question

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

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

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

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

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

آمل أن تكون قادرا على المساعدة.

يحرر:بعد نوم جيد استيقظت ووجدت ui.placeholder.index() في ال change-الحدث يحصل على الموضع الحالي للعنصر المسحوب.باستخدام هذا يمكنني تحديث النموذج، ولكن التصميم لا يزال في حالة من الفوضى أثناء السحب.

أطيب التحيات

Answer 1

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

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

هذا الكمان المحدث يظهر الحل الخاص بي.