私は、 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>
を強調表示する必要があります。これを達成する方法はありますか?