Question

我有一个HTML列表

<ul id="sections" class="ui-sortable">
  <li class="selected">one</li>
  <li> two</li>
  <li>three</li>
  <li> four  </li>
  <li>five</li>
  <li> six </li>
</ul>

该列表可使用jQuery UI进行排序。

最初，第一个列表项具有“已选择”类。如果用户拖动任何项目并更改列表的顺序，则新位置中的删除列表项应具有“已选择”类和＆amp;还应删除任何其他列表项“已选择”。

在任何时间点都只能有一个列出“已选中”类的列表项。

如何实现这一点，我正在尝试使用beforestop，停止，更改事件，但我无法弄明白

  $( "#sections" ).sortable({
              stop: function( event, ui ) {

                    var present = $(ui.item).addClass("selected");
                    console.log(present);
                  }
            });

Answer 1

试试这个

stop: function( event, ui ) {
                  $(this).find('.selected').removeClass("selected")

                    var present = $(ui.item).addClass("selected");
                    console.log(present);
                  }

DEMO

Answer 2

使用.siblings（）

 $( "#sections" ).sortable({
      stop: function( event, ui ) {
        $(ui.item).addClass("selected").siblings().removeClass('selected');
      }
 });

demo

jquery sortable：已删除的可排序列表项应该应用一个类，删除其他项中的类似类

2 个答案: