jQuery UI Сортируемый.Остановить сброс одного конкретного предмета в другой конкретный предмет? - PullRequest
Новая
       0

jQuery UI Сортируемый.Остановить сброс одного конкретного предмета в другой конкретный предмет?

0 голосов
/ 10 октября 2011

У меня есть меню, которое выглядит примерно так. 

<ul class="sortable">
  <li id="item1">
    <span class="grab"></span>
    <!-- More stuff -->
  </li>
  <li id="item2">
    <span class="grab"></span>
    <!-- More stuff -->
    <ul>
       <!-- Submenu Links -->
    </ul>
  </li>
  <li id="item3">
    <span class="grab"></span>
    <!-- More stuff -->
    <ul>
       <!-- Submenu Links -->
    </ul>
  </li>
</ul>

Я сделал это сортируемым.Есть несколько меню.Все работает, сортирует, есть события ajax для сохранения.Все прекрасно.

.item2 и .item3 - это подменю.Единственная разница между подменю и ссылкой заключается в наличии ul.

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

$('.sortable').sortable({
    handle : '.grab', 
    items: "li:not(.no-sort)",
    connectWith: '.sortable',
    stop: function(event, ui) {
        if ( ! $('.prompt.saveOrder').length) {
            $('.prompt').remove();
            $('.content').prepend('<p class="prompt"><a href="'+window.location.pathname+'" class="saveOrder">Click here to save the order of your items</a></p>');
        }
    },
    beforeStop: function(event, ui) {
    }
});

Я вполне уверен, что прежде чем Stop будет правильной функцией.Кто-нибудь знает, как мне этого добиться?Я не против добавить немного дополнительного HTML, чтобы это произошло.

Любая помощь / совет будет принята с благодарностью.

1 Ответ

0 голосов
/ 10 октября 2011 
 $('.sortable').sortable({
        handle: '.grab',
        items: ".link",
        connectWith: '.sortable',
        stop: function(event, ui) {
            if (!$('.prompt.saveOrder').length) {
                $('.prompt').remove();
                $('.content').prepend('<p class="prompt"><a href="' + window.location.pathname + '" class="saveOrder">Click here to save the order of your items</a></p>');
            }
        },
        beforeStop: function(event, ui) {}
    });

Пример здесь

...