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

Question

使用 jquery sortable 我可以在 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'
        });
    }
});

Demo here

Answer 1

另一种改变placeholder风格的方法：

看到你有（当你拖动你的盒子时）一个带有与占位符相关的 class 的标签：

ui-sortable-placeholder

所以制作一个 class 来覆盖预设：

.ui-sortable-placeholder
{
  //Style
}

编辑：应用悬停 class

创建一个函数来处理 jQuery 中的 hover class 并将其调用到事件参数中：

    // 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'
            });
        }
    });

Beautiful Fiddle!

对于其他事件，请享受 DOC : http://api.jqueryui.com/sortable/

Answer 2

根据 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'
        });
    }
});

New Demo

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

how to style jquery sortable target list before drop

html

javascript

css

jquery

jquery-ui-sortable