مشكلة قابلة للفرز في jquery.ui

Question

لقد قمت بإنشاء قائمة متداخلة مع وظيفة السحب/الإفلات.مشكلتي هي أنني أريد أن يتم فرز كل تداخل في حد ذاته.على سبيل المثال:

-first_level
-first_level
 -second_level
 -second_level
-first_level

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

هذا هو المثال الخاص بي JS والقائمة:

$("#sort_list").sortable({
  containment: '#sort_list',                                             
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>   

أيه أفكار؟شكرا يا شباب!

Answer 1

حسنا، يبدو وكأنه لقد وجدت هذه المشكلة. كنت معلنا: المواد: "لى" وهكذا لم يكن الكشف عن UL كما حاوية / البند للفرز. شكر كبير لkarim79 لمساعدتي أعتقد أن كل هذا من خلال:)

وفيما يلي رمز العمل (انها في الأساس قائلا "الجميع البقاء في الحاويات الخاصة بها"):

    $("#sort_list").sortable({
      containment: 'parent',                                                                                     
      axis: 'y',
      revert: true,
      opacity: 0.8
    });
    $(".sub_list").sortable({ 
      containment: 'parent',
      axis: 'y',
      revert: true,
      opacity: 0.8,
    });
    $("#sort_list").disableSelection();

    <ul id="sort_list">
      <li>one</li>
      <li>two
        <ul class="sub_list">
        <li>sub one</li>
        <li>sub two</li>
        </ul>
      </li>
      <li>three</li>
      <li>four</li>
    </ul>

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

Answer 2

حاول إعطاء خيار الاحتواء محددًا معقدًا مثل:

$("#sort_list").sortable({
  containment: '#sort_list:not(.sub_list)',                                                                                     
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});

الذي - التي يجب قم بالخدعة إذا كنت تستخدم jQuery 1.3+:

(من يدوي)

اعتبارًا من jQuery 1.3: لا () تدعم أيضًا محددات مفصولة بفواصل ومحددات معقدة ، على سبيل المثال::not(div a) و :not(div,a).

يقول دليل jQuery Sortable الاحتواء خيار:

القيود التي تسحب إلى داخل حدود العنصر المحدد - يمكن يكون عنصر DOM ، "الأصل" ، "مستند" أو "نافذة" أو مسج محدد.