Question

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

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

我无法弄清楚如何做到这一点。有人能指出我正确的方向吗？

提前致谢！

Answer 1

您可以在删除元素时添加回调函数，并将前导项目的bacgground设置为黄色。请参阅下面的链接，了解丢弃事件详细信息 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>

Answer 2

你没有告诉我们你的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");

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

在jquery拖放列表中更改前10个列表项的颜色

2 个答案: