带有项目限制的jquery可排序

Question

我想避免第 7 项被拖入红色列表。

$("span").sortable({
  connectWith: ".con"
}).disableSelection();

#red {
  margin-top: 10px;
  border: 1px solid red;
  display: block;
}

#green {
  margin-top: 10px;
  border: 1px solid green;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.9/jquery-ui.min.js"></script>

<form id="form">
  <span id="red" class="con">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
    </span>
  <span id="green" class="con">
        <div>Item 6</div>
        <div>Item 7</div>
    </span>
</form>

我想我必须使用停止事件并检查项目 7 是否在红色列表中，如果是则将项目返回到原始位置。

Answer 1

您可以使用 sortable('stop') 来使用“取消/停止”功能：

$("span").sortable({
  remove: function(e, ui) {
    if(ui.item.hasClass("id_7")) {
        alert('id 7');
        e.preventDefault();
    }
  },
  connectWith: ".con"
});