停止使用jQuery-ui替换已取消元素的顺序 [英] Stop siblings replacing order of canceled element with jQuery-ui

问题描述

我在做什么

我使用jQuery-ui对html的许多部分进行排序。到目前为止，这些项目是可排序的。我想禁用两个div的排序，并保留其他排序功能。

我在一个已经声明这些部分可排序的CMS中工作。我试图做的是强制元素的类不可分类不能排序。

简单示例

HTML

 < div class =normal-sortables> 
< div classnot-sortable>不可排序部分< / div> 
< div classnot-sortable>不可排序部分< / div> 
< div>可排序部分< / div> 
< div>可排序部分< / div> 
< / div> 
  

JQUERY

  jQuery（函数（$）{
 $（＃normal-sortables）。sortable（{
 cancel：。not-sortable
}）; 
}）; 
  

这可以防止无法排序的项目被拖动，但是如果您将兄弟部分，他们仍然移动，他们的顺序改变。

我发现美元。

b
$ b

  $（＃normal-sortables）.sortable（{
 items：'：not（.not-sortable）'
}）; 
  

禁用了所有项目。

I对于jQuery没有经验，我发现了更复杂的解决方案来解决我的问题，但我想了解为什么上述方法无法正常工作，并且尽可能简化。

UPDATE

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

我会保留这篇文章的结果以更新链接。

解决方案

不知道您是否有错别字或发生了其他事情，但项：'：not（.not-sortable）'似乎工作。

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

< script src =https ：< script src =http://code.jquery.com/ui/ 1.11.4 / jquery-ui.min.js>< / script>< div class =normal-sortables> < div class =not-sortable>不可排序部分< / div> < div class =not-sortable>不可排序部分< / div> < div>可排序部分< / div> < div>可排序部分< / div>< / div>

What I'm trying to do

I'm using the jQuery-ui to sort a number of sections of html. So far the items are sortable. I want to disable sorting for two divs and keep the sortable functionality on the others.

I'm working within a CMS that has already declared these sections as sortable. What I'm trying to do is force the elements with a class of "not-sortable" to not be sortable.

Simplified example

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 prevents the "not-sortable" items from being dragagable, but if you move the siblings above these sections, they still move and their order is changed.

I found this question 13885665

So, I changed my solution above to

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

This disabled all items.

I'm not experienced with jQuery, I found much more complex solutions to my problem but I'd like to understand why the above isn't working and to keep things simple if possible.

It seems like I must be missing something obvious.

UPDATE

The code above does work, but my situation is more complicated. Therefore I've posted a new more specific question here

I'll keep this post updated with results too to keep things linked.

解决方案

Not sure if you just had a typo or if something else happened, but items : ':not(.not-sortable)' seems to work.

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>

这篇关于停止使用jQuery-ui替换已取消元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！