Javascript jQuery sortable无法处理多个容器

试图使元素可排序，但它无法用于多个容器。 在JSFIDLE中，您将看到第一个容器工作，而第二个容器不工作

$("#sortable").sortable({
    cancel: ".fixed"
});
$("#sortable").disableSelection();

HTML:

如何解决这个问题？我对这东西很陌生，想不出解决办法

---

谢谢大家!

具有相同

id

的多个元素被视为无效，因为每个元素的

id

必须唯一

如果您将

id

s更改为类：

class=“sortable”

并将jQuery更改为使用

class

选择器而不是

id

选择器：

$（“.sortable”）

您的问题将得到解决，请参阅下面的工作示例：

$（“.sortable”）.sortable({
取消：“.fixed”
});
$（“.sortable”）.disableSelection（）
.sortable{
列表样式类型：无；
保证金：0；
填充：0；
宽度：60%；
}
李先生{
保证金：0 3px 3px 3px；
填充：0.4em；
左侧填充：1.5em；
字号：1.4em；
高度：18px；
光标：移动；
}
.可排序的li span{
位置：绝对位置；
左边距：-1.3em；
}
.可排序的李{
游标：默认值；
颜色：#9595；
不透明度：0.5；
}


第1项
第2项
第3项
第4项
第5项
第6项
第7项



第1项
第2项
第3项
第4项
第5项
第6项
第7项


允许对一组DOM元素进行排序。单击某个元素并将其拖动到列表中的新位置，其他项目将根据需要进行调整。默认情况下，可排序项共享
draggable
属性。

简要查看所有问题。«被视为无效»此外：“id”概念是一个独特的概念，早在电子和编码之前就有了。因此，尼克，你上次的编辑没有带来任何问题。（您可以还原一些编辑…关键字是“回滚”）LOLLL In
<div class="demo">
<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default fixed"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default fixed"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<hr/>
<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default fixed"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default fixed"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}