1

我有一个 20 项的清单。我正在使用 jquery 拖放来允许用户对项目列表进行排序。我希望列表中的前 10 个项目保持相同的颜色，比如说黄色，因为这些项目已重新排列。例如，如果将#19 的项目拖到前十名内，则#10 的项目将被推到#11，而应该为黄色的项目将是#的 1,2,3,4,5,19 ,6,7,8,9。

无论哪个顺序，前十名都应该保持黄色。其余的只是黑色

我不知道该怎么做。有人可以指出我正确的方向吗？

提前致谢！

4

2 回答 2

2

您可以在删除元素时添加回调函数并将前十项的背景设置为黄色。有关放置事件的详细信息，请参阅下面的链接 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");

开始排序。前十名将保持黄色，而其他人则为黑色。

于 2012-10-28T06:11:07.987 回答