Question

我有一个看起来有点像这样的菜单。

<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) {
    }
});

我很确定beforeStop是正确的功能。有谁知道我怎么能做到这一点？我不介意添加一些额外的HTML来实现它。

非常感谢任何帮助/建议。

Answer 1

 $('.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) {}
    });

Example Here

jQuery UI可排序。停止将一个特定项目放入另一个特定项目？

1 个答案: