Question

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

能够在用户正确拖动项目时突出显示该项目位置。
在所有项目处于正确位置时获得反馈

到目前为止，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

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

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（）如何仅在正确的位置突出显示项目

1 个答案: