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

Question

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

http://jsfiddle.net/akjfnkfd/

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

我试图设置身高：自动但是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