2

我试图让一堆 jQuery sortables 的行为类似于带有接受选项集的 droppable。基本上，我有一个搜索功能，它返回三种不同类型的产品（比如苹果、香蕉和柑橘类水果），然后可以将它们拖到用户创建的列表中（搜索结果是 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>

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

4

2 回答 2

2

您可以调用.draggable每个部分：

$('ul#results li.banana').draggable({
    connectToSortable: 'ul.section.banana'
});
$('ul#results li.apple').draggable({
    connectToSortable: 'ul.section.apple'
});
于 2012-06-07T15:42:42.710 回答
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");
}
...

ETC

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

于 2012-06-13T04:12:38.020 回答