0

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

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

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

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'});
             }
        })
    }
Edgedudette
  • 61
  • 1
  • 9

1 Answers1

0

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

}
Edgedudette
  • 61
  • 1
  • 9