jquery sortable（）如何仅在正确的位置突出显示项目

我使用sortable（）获取5个对象的列表。 我把它们装在随机位置。 我想要：

1. 当用户将其拖动到正确位置时，能够突出显示该项目。

2. 当所有物品都处于正确位置时获得反馈

到目前为止2工作正常，但我似乎只有当他们在正确的位置时才能让项目突出显示。

sym.$('container').html("
"); function loadLogs(){ if(i<4){ i++; // loads image from question set sym.$('#sortable').append("
"); } 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

好。 我终于找到了解决方案。

 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}); } } }); }