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

而不是使用不透明度的启动和停止功能使用可排序的默认不透明度函数

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

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

3 个答案: