Определение того, что принимает Sortable? - PullRequest
Новая
       15

Определение того, что принимает Sortable?

1 голос
/ 13 февраля 2012

Как мне определить, какие элементы принимать в сортируемом?

Например, скажем, у меня есть следующая псевдоразметка: 

<ul id="draggable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li class="nodrag">Item 3</li>
   <li>Item 4</li>
</ul>

<ul id="sortable">

</ul>

Я использую опцию connectToSortable в Draggable для подключенияэто к сортируемым.

Так как у меня есть сортируемые внутри сортируемых (INCEPTION !!;)), я хочу иметь возможность решить, разрешено ли перетаскивание на конкретную сортируемую.

Как я могу это сделать?В настоящее время я использую событие прекращения сортировки для манипуляции с отброшенным объектом - я пытался удалить объект, если он содержит класс nodrag, но эффект «привязки» все еще отображается (эффект, когда перетаскиваемый объект медленно перемещается на место в сортируемом объекте)

Есть ли способ, которым я могу это сделать?

1 Ответ

2 голосов
/ 12 мая 2012

У меня была похожая проблема с приложением перетаскивания, которое я писал.Проблема, с которой я столкнулся, заключалась в том, что у меня было, скажем, 3 сортируемых списка вроде этого: 

<ul class="apple">  <!--  accepts apples -->
</ul>

<ul class="apple orange">  <!--  accepts apples and oranges -->
</ul>

<ul class="orange banana">  <!--  accepts oranges and bananas -->
</ul>

Затем у меня был еще один основной список с яблоками, апельсинами и бананами, которые можно было перетащить в эти списки.Очевидно, что проблема заключалась в том, чтобы ограничить перетаскиваемые объекты, чтобы их нельзя было поместить в несовместимые списки.

Мне нужно было использовать опцию connectToSortable на перетаскиваемых объектах, чтобы указать, в какие списки они могут быть помещены.Так что я могу определить мои перетаскиваемые объекты следующим образом: 

<li class="drag-apple">...</li>
<li class="drag-orange">...</li>
<li class="drag-banana">...</li>

$(li.drag-apple).draggable({ connectToSortable: '.apple', ... });
$(li.drag-orange).draggable({ connectToSortable: '.orange', ... });
$(li.drag-banana).draggable({ connectToSortable: '.banana', ... });

С этим на месте перетаскиваемые объекты будут нацеливаться только на соответствующие списки.

В вашем случае, я не уверен, что вложенныесортировка создает дополнительную сложность.Тем не менее, есть вложенный плагин sortables, который вы можете посмотреть ( nested Sortable ).Надеюсь, что подобные методы будут работать там.

...