несколько выборочных сортируемых списков (1 мастер и 2 подпрограммы) - PullRequest
Новая
       11

несколько выборочных сортируемых списков (1 мастер и 2 подпрограммы)

1 голос
/ 25 января 2012

Я не видел примеров селективной сортировки:

[A: один основной список]
[B: один подсписок]
[C: другой подсписок]

Условия:

  1. B и C можно перевести на A
  2. A может передавать в B только элементы, полученные из B (то же самое относится и к C)
  3. B и C не могут передавать между собой

Пример структуры: 

<ul class="A"></ul>    
<ul class="B">
   <li class="child-B" />
   <li class="child-B" />
   <li class="child-B" />
</ul>
<ul class="C">
   <li class="child-C" />
   <li class="child-C" />
   <li class="child-C" />
</ul>

Я пытался применить сортировку к спискам и пытаться динамически изменить connectWith (они все смогут подключиться к A), но безуспешно. Вот одна из моих попыток ( jsFiddle ). Я также попытался указать «.master, .sub» в качестве начального connectWith, но он позволяет перекрестное совместное использование.

Я думаю, что второй цикл обновляет соединение с сортируемым, так что я застрял. Есть идеи?

1 Ответ

6 голосов
/ 25 января 2012

Впервые я поигрался с sortable (с небольшим чтением на jqueryui.com), но я думаю, что это должно сработать. Вы можете увидеть это в действии на следующем jsFiddle

HTML: 

<ul class="master"></ul>

<ul class="sub a">
    <li class="a">Foo</li>
    <li class="a">Boo</li>
</ul>
<ul class="sub b">
    <li class="b">Bar</li>
    <li class="b">Baz</li>
</ul>

JQuery: 

$(document).ready(function(){

    // create sortables
    $( ".master,.sub" ).sortable({
       connectWith: ".master,.sub",
       revert: true,
       receive: function(event, ui) {

           // only perform for sub drop downs
           if ($(this).hasClass('sub'))
           {
               // if the item doesn't have the matching sub class
               if (!$(this).hasClass($(ui.item).attr('class')))
               {
                   // cancel the sortable
                   $(ui.sender).sortable('cancel');
               }
           }
       }
    }).disableSelection(); 
});

Этот пример в основном выполняет проверку при получении предмета, и если он не проходит, он отменяет ход.

Надеюсь, это то, что вы ищете.

...