如何在删除之前设置 jquery 可排序目标列表的样式

how to style jquery sortable target list before drop

本文关键字：排序 目标 列表 样式 jquery 设置 删除      更新时间：2023-09-26

使用 jquery sortable，我可以在选项中定义的 conect 列表中设置占位符connectWith样式，这样我就可以看到内容将被丢弃的位置。但是，我找不到一种方法来设置包含占位符的列表的样式。

我的代码：

.HTML：

<div class="sortable">
    <div class="item"></div>
</div>
<div class="sortable"></div>
<div class="sortable"></div>

Javascript：

$(".sortable").sortable({
    connectWith: ".sortable",
    over: function(event,ui){
        //add class .hover to list
    },
    change: function(event, ui) {
        //style placeholder
        ui.placeholder.css({
            visibility: 'visible',
            background: '#EEE'
        });
    }
});

在这里演示

根据 Alteyss 的回答，我通过在事件上方、停止和输出上添加新行来设置项目父项的样式：

$(".sortable").sortable({
    connectWith: ".sortable",
    stop: function(event,ui){
        $('.sortable').removeClass('hover');
    },
    over: function(event,ui){
        //will add class .hover to list
        $('.ui-sortable-placeholder').parents('.sortable').addClass('hover');
    },
    out: function(event,ui){
        $('.ui-sortable-placeholder').parents('.sortable').removeClass('hover');
    },
    change: function(event, ui) {
        //will style placeholder
        $('.ui-sortable-placeholder').css({
            visibility: 'visible',
            background: '#EEE'
        });
    }
});

新演示

另一种

更改placeholder样式的方法：

看到您有一个（当您拖动框时）带有与占位符相关的类的标签：

ui-sortable-placeholder

所以创建一个将覆盖预设的类：

.ui-sortable-placeholder
{
  //Style
}

编辑：应用悬停类

创建一个在 jQuery 中处理hover类的函数，并将其调到事件参数中：

    // Your function
    var addClass = function (jQueryElement, add) {
        // Add or remove your class according to the boolean
        if (add) {
            //Add class with : addClass from jQuery
            $(jQueryElement).addClass("hover");
        } 
        else {
            //Remove class with : removeClass from jQuery
            $(jQueryElement).removeClass("hover");
        }
    }
    // Plugin use
    $(".sortable").sortable({
        connectWith: ".sortable",
        // This event is triggered when a sortable item is moved into a sortable list.
        over: function(event,ui){
            var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable");
            addClass(elementsToChange, true);
        },
        // This event is triggered when a sortable item is moved away from a sortable list.
        out: function(event,ui){
            var elementsToChange = $(".ui-sortable-placeholder").parents(".sortable");
            addClass(elementsToChange, false);
        },
        // This event is triggered when sorting has stopped.
        stop: function(event,ui){
            addClass(".sortable", false);
        },
        change: function(event, ui) {
            //style placeholder
            ui.placeholder.css({
                visibility: 'visible',
                background: '#EEE'
            });
        }
    });

美丽的小提琴！

对于其他活动，请享受DOC ： http://api.jqueryui.com/sortable/

相关文章：