كيف أقوم بتوصيل عدة للفرز قوائم بعضها البعض في مسج UI ؟

Question

أنا جديدة على مسج, و أنا تكافح مع استخدام مسج UI sortable.

أنا أحاول أن أضع معا صفحة لتسهيل تجميع و ترتيب العناصر.

صفحتي لديه قائمة من مجموعات و كل مجموعة تحتوي على قائمة من العناصر.أريد أن تسمح للمستخدمين لتكون قادرة على القيام بما يلي:

1. ترتيب المجموعات
2. إعادة ترتيب العناصر في مجموعات
3. نقل العناصر بين المجموعات

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

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>  

كنت قادرا على فرز القوائم عن طريق وضع $('#groupsList').sortable({}); و $('.itemsList').sortable({}); في document ready function.حاولت استخدام connectWith الخيار sortable أن تجعل من العمل ، لكنني فشلت فشلا ذريعا.ما أود القيام به هو الحصول على كل groupItemsX قائمة متصلة كل groupItemsX القائمة نفسها.كيف يجب أن أفعل ذلك ؟

---

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

على أية حال, كنت تحاول أن تفعل شيئا مثل هذا لم يكن العامل:

$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function () {  
    $(this).sortable( {  
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    });  
});  

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

كل الإجابات المقدمة من قبل آدم JimmyP يعمل في IE (على الرغم من أنها تتصرف حقا الغريب في فايرفوكس ، الكتابة فوق عناصر القائمة عند محاولة إعادة الفرز).سأقبل واحدة من إجاباتك التصويت على الآخر, ولكن إذا كان لديك أفكار/ اقتراحات حول تصفية أود أن أسمع ذلك.

Answer 1

يمكنك إدراج الجملة التي استخدمتها connectWith?هل وضع قائمة من مجموعات أخرى داخل أقواس(حتى لو كان محدد)?وهذا هو:

...sortable({connectWith:['.group'], ... }

Answer 2

هذا يجب أن تعمل:

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});

Answer 3

 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

هذا سيكون كل شيء على ما يرام بالنسبة لك!تفعل نفس الشيء هنا بالنسبة لي.لا يلزم تغيير في HTML الخاص بك.