Question

我使用jQuery有以下嵌套的可排序代码：

HTML：

<div id="listContainer">
  <ul>
    <li class="listItem">Item 1</li>
    <li class="listItem groupItem">
      <ul>
        <div class="groupTitle">Group A</div>
        <li class="listItem">Item 2</li>
        <li class="listItem">Item 3</li>
        <li class="listItem">Item 4</li>
      </ul>
    </li>
    <li class="listItem">Item 5</li>
    <li class="listItem">Item 6</li>
    <li class="listItem groupItem">
      <ul>
        <div class="groupTitle">Group B</div>
        <li class="listItem">Item 7</li>
        <li class="listItem">Item 8</li>
      </ul>
    </li>
    <li class="listItem">Item 9</li>
  </ul>
</div>

JS：

$( "#listContainer ul" ).sortable({
  connectWith: "#listContainer ul",
  placeholder: "itemPlaceholder",
  cursor: 'move'
});

JSFiddle

我目前面临两个问题：

- 如果我拖动组标题，它只会移动标题行，但我想移动整个组。

- 我不想允许嵌套组。目前，您可以将组移动并嵌套在另一个组中，但只应移动项目。

Answer 1

我修改了您的DEMO并创建了NEW DEMO。

在此DEMO中：

所有项目都可以从外部列表到组列表进行排序，反之亦然，这些项目也可以在这些组中进行排序。

这些组无法嵌套。如果尝试嵌套组，则会弹出警告

请注意，为了实现这一目标，您需要对列表项进行结构更改，就像您在演示中观察到的那样。

以下是演示代码：

<强> HTML：

<div id="listContainer">
<ul class="srtable">
  <li class="listItem">Item 1</li>
  <li class="listItem groupItem">
    <div class="group">
      <div class="groupTitle">Group A</div>
      <div class="listItem">Item 2</div>
      <div class="listItem">Item 3</div>
      <div class="listItem">Item 4</div>
    </div>
  </li>
  <li class="listItem">Item 5</li>
  <li class="listItem">Item 6</li>
  <li class="listItem groupItem">
    <div class="group">
      <div class="groupTitle">Group B</div>
      <div class="listItem">Item 7</div>
      <div class="listItem">Item 8</div>
    </div>
  </li>
  <li class="listItem">Item 9</li>

  </ul>
</div>

<强> JS：

$( "#listContainer ul" ).sortable(
{
    connectWith: ".group",
  placeholder: "itemPlaceholder",
  cursor: 'move'
  }
);

$('.group').sortable({
    items: "> div.listItem",
  connectWith: ".srtable, .group",
  receive: function( event, ui ) {
    //alert('receive');
    //console.log(ui);
    //console.log(ui.item)
    //console.log($(ui.item).attr('class'))
    if ($(ui.item).hasClass('groupItem')) {
      $(ui.sender).sortable("cancel");
      alert('Sorry! Groups cannot be nested');
    }

  }
});

jQuery ui sortable：如何禁止组的嵌套，同时允许所有项目进行可排序

1 个答案: