jquery - Jquery UI 可排序，突出显示选中或拖动的框

Question

我正在创建要拖动和排序的框列表。我需要使用与原始颜色不同的颜色突出显示所选框。以下代码使其他项目半透明。

$("#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

你很接近：

$("#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");
    }
});

另外我建议不要直接操作元素样式，而是向元素添加和删除类以修改其样式（更易于维护和全局实现）。

Answer 2

使用可排序的默认不透明度函数，而不是使用 start 和 stop 函数进行不透明度

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

Answer 3

如果只添加一个具有定义的突出显示样式的类呢？

$("div").addClass("selected");