停止兄弟姐妹使用jQuery替换已取消元素的顺序

Question

我想做的是

我正在使用jQuery对html的许多部分进行排序。到目前为止，这些物品是可以分类的。我想禁用两个div的排序，并将可排序的功能保留在其他方面。

我在一个已经声明这些部分为可排序的CMS中工作。我想要做的是强制使用"not-sortable"类的元素不能排序。

简化示例

HTML

<div class="normal-sortables">
    <div class"not-sortable">Not sortable section</div>
    <div class"not-sortable">Not sortable section</div>
    <div>Sortable section</div>
    <div>Sortable section</div>
</div> 

JQUERY

jQuery(function($) {
    $("#normal-sortables").sortable({
        cancel:".not-sortable"
    });
});

这将防止“不可排序”项被拖动，但是如果您将兄弟姐妹移到这些区域的上方，它们仍然会移动，并且它们的顺序将被更改。

我找到了this question 13885665

所以，我把上面的解决方案改为

$( "#normal-sortables" ).sortable({
    items : ':not(.not-sortable)'
});

这将禁用所有项目。

我对jQuery没有经验，我发现了更复杂的解决方案来解决我的问题，但我想了解为什么上面的方法不起作用，如果可能的话保持简单。

好像我错过了一些明显的东西。

更新

上面的代码确实有效，但我的情况更复杂。因此，我发布了一个新的更具体的问题here

我会不断更新这篇文章的结果，以保持联系。

Answer 1

不确定您是否有错误，或者是否发生了其他事情，但items : ':not(.not-sortable)'似乎有效。

​

jQuery(function($) {

  $(".normal-sortables").sortable({
    items: ":not(.not-sortable)"
  });

  $('.normal-sortables').disableSelection(); // added for example only
  
});

.normal-sortables div {
  border: 1px solid red;
  margin: 10px;
}

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

<div class="normal-sortables">
  <div class="not-sortable">Not sortable section</div>
  <div class="not-sortable">Not sortable section</div>
  <div>Sortable section</div>
  <div>Sortable section</div>
</div>

​