如何在空列上进行jQuery可排序删除?

时间:2017-09-01 16:56:24

标签: javascript jquery jquery-ui jquery-ui-sortable

一切正常但是当我将一列放入另一列时,会有一个空列,我不能再放任何东西了。

HTML

checkout scm

JS

scm

检查jsFiddle,我们从四列开始,但在拖放之后,我们有空列,我们不能插入它们,而我想这样做。

1 个答案:

答案 0 :(得分:1)

这是工作小提琴。 问题是你在错误的元素上创建了可排序的小部件。 在.column元素上创建它将使其正常工作。

http://jsfiddle.net/WFPaj/124/

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        items: '.portlet',
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        distance: 0.1,
        dropOnEmpty: true
    });

    $(".portlet").resize(function() {
        $(".portlet").css("height", "auto");
    });

    $(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
})

CSS:

.column {
    float: left;
    padding-bottom: 100px;
    background: #eee;
    margin: 10px;
    min-width: 190px;
}

相关问题: jQuery UI drop on empty container/list not working