结合可拖动和可排序导致css高度问题

【问题标题】：Combining draggable and sortable leads to css height issue结合可拖动和可排序导致css高度问题
【发布时间】：2015-08-28 04:07:00
【问题描述】：

当我从一个盒子拖到另一个盒子时，'ul.box' 类的高度有时会太高，这是我的代码：

http://jsfiddle.net/akjfnkfd/

这是一个可以通过将列表项从一个框拖到另一个框来复制的示例，条框突出的底部绿色是错误的

我尝试设置 height: auto 但随后 ul 完全消失

day_containers.droppable({
    accept: ".box-container",
    drop: function (event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({
            top: 0,
            left: 0,
            height: auto  /* <---- doesn't fix my issue */
        }).appendTo(droppedOn);
    },
});

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

这个问题的出现是由于 jQuery 可拖动/可放置自动将内联样式添加到某些元素（例如高度和宽度）。要解决您的问题，您可以仅使用 ui.helper.first().css({height: ''}); 之类的东西修改高度，或者只需将内联样式连同 ui.helper.first().removeAttr('style'); 之类的东西一起删除，然后将其添加到 day_containers.droppable 中，如下所示：

jQuery

day_containers.droppable({
    accept: ".box-container",
    drop: function (event, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);

        //remove inline styles
        ui.helper.first().removeAttr('style');

        $(dropped).detach().css({
            top: 0,
            left: 0,
        }).appendTo(droppedOn);
    },
    over: function (event, elem) {
        $(this).addClass("over");
    },
    out: function (event, elem) {
        $(this).removeClass("over");
    }
});

Updated fiddle

【讨论】：