Jquery UI sortable, highlight selected or dragged box

Question

I am creating list of boxes to be drag around and sort. I need the selected box to be highlighted with different color than original. Following codes make other items semi transparent.

$("#sortable").sortable({ 
    axis: "y", 
    cursor: "move",
    change: function (event, ui) {}, //save the sort
    start: function (event, ui) {
        $("#sortable").css("opacity", "0.6");                                
    },
    stop: function (event, ui {
        $("#sortable").css("opacity", "1.0"); 
     }
});

Answer 1

Your are close:

$("#sortable").sortable({
    axis: "y",
    cursor: "move",
    change: function(event, ui) {}, //save the sort
    start: function(event, ui) {
        $(ui.item).css("opacity", "0.6");
    },
    stop: function(event, ui) {
        $(ui.item).css("opacity", "1.0");
    }
});

Also I would suggest instead of directly manipulating the elements style, add and remove class to the element to modify its style (easier to maintain and globally implement).

Answer 2

instead of using start and stop function for opacity use sortable default opacity function

$("#sortable").sortable({ 
    axis: "y", 
    cursor: "move",
    opacity: 0.5,  // set opacity to 50% while dragging
    change: function (event, ui) {} //save the sort
});