1

20項目のリストがあります。ユーザーがアイテムのリストをソートできるように、jquery ドラッグ アンド ドロップを使用しています。リストの上位 10 個のアイテムを同じ色 (たとえば黄色) のままにして、アイテムが再配置されるようにしたいと考えています。たとえば、19 番目のアイテムがトップ 10 内にドラッグされた場合、10 番目のアイテムは 11 番目にプッシュされ、黄色であるべきアイテムは 1、2、3、4、5、19 になります。 ,6,7,8,9.

どの順番であっても、トップ 10 は黄色のままです。残りはただの黒です

これを行う方法がわかりません。誰かが私を正しい方向に向けることができますか?

前もって感謝します！

4

2 に答える 2

2

要素をドロップするときにコールバック関数を追加し、最初の 10 項目の背景を黄色に設定できます。ドロップ イベントの詳細については、以下のリンクを参照してください http://api.jqueryui.com/draggable/#event-stop コールバック イベントは次のようになります。

// pseudo code
function() {
  all_items.each(e, i) {
    if(i<10) set_bg(yelow, e);
    else set_bg(black, e);
  }
}

これを参照してください、私はフィドルで試しました、それは単にアラートボックスを配置します、ここで上記のロジックを実行してみてください

<script>
$( "#draggable" ).draggable({
    stop: function() {
        // your code goes here   
        alert('stop event')
    }
});
</script>
于 2012-10-28T05:58:42.600 に答える
1

あなたは私たちにあなたのhtmlを教えてくれなかったので、私はあなたがhtmlリストを使っていると推測しなければなりません. ソートが停止したら、要素の位置を取得し、割り当てる色を決定する必要があります

http://api.jqueryui.com/sortable/#event-stop

と使用index方法

作業例: http://jsfiddle.net/txm9y/

$( "#sortable" )
    .sortable({
        stop: function(event, ui){
            $(this).trigger("markTopTen");
        }
    })
    .disableSelection()
    .bind("markTopTen", function() {
        $(this).find("li")
            .removeClass("topTen")
            .each(function(index){
            if(index < 10)
                $(this).addClass("topTen");
        });
    })
    .trigger("markTopTen");

並べ替えを開始します。トップ 10 は黄色のままですが、その他は黒色です。

于 2012-10-28T06:11:07.987 に答える