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

Question

当我从一个盒子拖到另一个盒子时，'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);
    },
});

Answer 1

这个问题是由于 jQuery draggable/droppable 自动将内联样式添加到某些元素(例如高度和宽度)。要解决您的问题，您可以只修改高度，例如 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