jquery sortable（）如何仅在正确的位置突出显示项目 [英] jquery sortable() how to highlight an item when in correct position only

问题描述

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

I am using sortable() for a list of 5 objects. I load them in random position. I want to:

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

1. be able to highlight an item when the user drags it in its correct position.

在所有项目都处于正确位置时获得反馈

get a feedback when all the items are in the correct position

到目前为止2工作正常，但我似乎无法在项目处于正确位置时突出显示项目。

So far 2 works fine but I do not seem to be able to get the items to highlight only when they are in the correct position.

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

推荐答案

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

OK. I finally found the solution on my own.

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

}

这篇关于jquery sortable（）如何仅在正确的位置突出显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！