Question

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

我的代码：

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样式的方法：

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

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

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

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

2 个答案: