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

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

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

我想不出如何做到这一点。有人能指引我朝着正确的方向吗？

在此先感谢！

来源

2012-10-28 brandon-estrella-dev

你没有告诉我们你的html，所以我必须猜测你使用的是一个html列表。当排序停止，你必须获得元素和descide的位置颜色分配哪些

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-28 06:11:07

删除元素并将bacgground设置为前十项的黄色时，可以添加回调函数。见下面这个链接drop事件细节回调事件看起来像

// 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-28 05:58:42 AnandVeeramani

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

回答

相关问题