Geek asks and answers

JQuery UI sorting, highlighting a selected or draggable window

I am creating a list of boxes that need to be dragged and sorted. I need the selected box to be highlighted with a different color than the original. The following codes make other objects translucent.

$("#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"); 
     }
});
+3
source share
3 answers

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

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

0
source

instead of using the start and stop function for opacity, use the default opacity sort function

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

How about adding a class with highlighted styles?

$("div").addClass("selected");
-1
source

More articles:


All Articles