设置 jQuery sortable 接受哪些项目答案

【问题标题】：Setting which items are accepted by jQuery sortable设置 jQuery sortable 接受哪些项目
【发布时间】：2012-06-07 15:37:56
【问题描述】：

我正在尝试让一组 jQuery 可排序对象的行为类似于带有 accept 选项集的可放置对象。基本上，我有一个搜索功能，它返回三种不同类型的产品（比如苹果、香蕉和柑橘类水果），然后可以将它们拖到用户创建的列表中（搜索结果是 jQuery 可拖动的并使用connectToSortable），并且产品可在这些列表内和这些列表之间进行排序。但我希望这些列表中的每一个都只接受一种类型的产品，理想情况下为用户提供视觉反馈，了解哪些列表可以接受当前被拖动的项目。一些示例代码：

<ul id="results">
    <li class="banana">Plantain</li>
    <li class="apple">Granny Smith</li>
    <li class="citrus">Orange</li>
    <li class="banana">Enset</li>
    <li class="apple">Golden Delicious</li>
    <li class="citrus">Lemon</li>
</ul>

<ul class="section banana"></ul>
<ul class="section apple"></ul>
<ul class="section banana"></ul>
<ul class="section citrus"></ul>
<ul class="section apple"></ul>
<ul class="section apple"></ul>
<ul class="section citrus"></ul>

<script type="text/javascript">

    $("ul#results li").draggable({
        helper: "clone", 
        connectToSortable: "ul.section"
    });

    $("ul.section").sortable({
        connectWith: "ul.section"
    });

</script>

在上面的示例中，我希望属于“apple”类的<ul>s 只接受也是“apple”等的<li>s，并且当“apple”被拖动或排序时，我想要要突出显示的“苹果”<ul>s。知道如何实现这一目标吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

您可以为每个部分致电.draggable：

$('ul#results li.banana').draggable({
    connectToSortable: 'ul.section.banana'
});
$('ul#results li.apple').draggable({
    connectToSortable: 'ul.section.apple'
});

【讨论】：

感谢 Thomas，这解决了最初的拖动问题 - 但是一旦将项目放入可排序中，就没有什么可以阻止用户将其拖动到错误类的列表中。

【解决方案2】：

感谢 Thomas 让我走上了正确的道路 - 我按照他的建议满足了要求，并将相同的方法应用于 sortables，如下所示：

$("ul.section.apple").sortable({
    connectWith: "ul.section.apple"
});
$("ul.section.banana").sortable({
    connectWith: "ul.section.banana"
});
$("ul.section.citrus").sortable({
    connectWith: "ul.section.citrus"
});

通过将这些处理程序添加到可拖动对象和可排序对象的开始和停止事件中，我得到了突出显示：

...
start: function(event, ui) {
    $("ul.section.apple").addClass("highlight");
},
stop: function(event, ui) {
    $("ul.section.apple").removeClass("highlight");
}
...

等

当您仔细考虑时，这确实很明显。

【讨论】：