Question

我正试图让一堆jQuery sortables的行为类似于设置了accept选项的droppable。基本上，我有一个搜索功能，它返回三种不同类型的产品（比如苹果，香蕉和柑橘类水果），然后可以将它们拖动（搜索结果是jQuery draggable并使用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>仅接受{“1}} s也是”apple“等，并且当”苹果“被拖动时或排序我希望突出显示“apple”<li>。知道怎么做到这一点？

Answer 1

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

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

Answer 2

感谢托马斯让我走上了正确的轨道 - 我按照他的建议并将相同的方法应用于可排序系统，满足了这一要求，如下所示：

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

我通过将这些处理程序添加到draggables和sortables的开始和停止事件中来突出显示：

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

等

当你想到它时，真的很明显。

设置jQuery可接受的项目

2 个答案: