2

私は、 acceptオプションが設定されたドロップ可能と同様に動作するjQueryソート可能を取得しようとしています。基本的に、ユーザーが作成したリストにドラッグできる3つの異なるタイプ（リンゴ、バナナ、柑橘類など）の製品を返す検索機能があります（検索結果はjQueryドラッグ可能で、connectToSortableを使用します）。製品はこれらのリスト内およびリスト間でソート可能。しかし、私はこれらの各リストが 1 種類の製品のみを受け入れるようにしたいと考えています。理想的には、どのリストが現在ドラッグされているアイテムを受け入れることができるかについて視覚的なフィードバックをユーザーに提供することです。いくつかのコード例:

<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 が「apple」などの s のみを受け入れ<li>、「apple」がドラッグまたはソートされているときに「apple」<ul>を強調表示する必要があります。これを達成する方法はありますか？

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 に感謝します。

$("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");
}
...

等

あなたがそれについて考えるとき、かなり明白です。

于 2012-06-13T04:12:38.020 に答える