jquery sortable（）正確な位置にあるときにアイテムを強調表示する方法

Question

5つのオブジェクトのリストにsortable（）を使用しています。私はそれらをランダムな位置にロードします。 私がしたい：

1. は、ユーザーがその正しい 位置にそれをドラッグしたときに項目を強調表示することができます。

2. は、すべての項目が正しい位置に

あるときにこれまで2が正常に動作しますが、私は、彼らが正しいである場合にのみ、強調表示するアイテムを取得することができていないようなフィードバックを得ますポジション。

sym.$('container').html("<ul id='sortable' style = list-style-type:none; ></ul>"); 
function loadLogs(){  
    if(i<4){ 
     i++; // loads image from question set   
     sym.$('#sortable').append("<li id="+question[i]+"><img class = 'default' src='images/C"+ set+"L"+ question[i] +".png' style='width:217px; height:43px;'></li>"); 
    } 
    sym.$('#sortable').sortable({ 
    update: function() {  
     save_new_order(); 
    } 
    }); 
} 

sym.$("logButton").bind('click',function(){ 
    loadLogs(); 
}); 

    function save_new_order() { 
     var order = sym.$('#sortable').sortable('toArray'); 

     if(order[0] == 1 && order[1] == 2 && order[2] == 3 && order[3] == 4 && order[4] == 5){ 
      sym.$('#sortable').sortable("disable");    
      // feedback code here 
     } 
     sym.$('#sortable').sortable({ // the highlight is not working correctly 
      stop: function(event,ui){ 
       ui.item.css({'border': '2px solid red'}); 
      } 
     }) 
    } 

Answer 1

OK。私はついに自分自身で解決策を見つけました。

function save_new_order() { 
    var order = sym.$('#sortable').sortable('toArray');   
    if(order[0] == 1 && order[1] == 2 && order[2] == 3 && order[3] == 4 && order[4] == 5){ 
     sym.$('#sortable').sortable("disable");     
     // feedback code here 

    } 
    sym.$('#sortable').sortable({ 
     stop: function(event, ui){ 
      if(ui.item.attr('id') == 1 && order[0] == 1){ 
      ui.item.css({'background-color':'lime', 'border-radius': 10}); 
     } else if(ui.item.attr('id') == 2 && order[1] == 2){ 
      ui.item.css({'background-color':'lime', 'border-radius': 10}); 
     } else if(ui.item.attr('id') == 3 && order[2] == 3){ 
      ui.item.css({'background-color':'lime', 'border-radius': 10}); 
     } else if(ui.item.attr('id') == 4 && order[3] == 4){ 
      ui.item.css({'background-color':'lime', 'border-radius': 10}); 
     } else if(ui.item.attr('id') == 5 && order[4] == 5){ 
      ui.item.css({'background-color':'lime', 'border-radius': 10}); 
     } else{ 
      ui.item.css({'background-color':'rgba(7,255,0,0.00)', 'border-radius': 10}); 
     } 
    } 
    }); 

}