更改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個列表項的顏色

回答

相關問題