【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2019-08-05
      • 2013-12-21
      • 2013-08-26
      • 1970-01-01
      • 2014-01-03
      • 2014-07-02
      • 2015-11-04
      • 2013-04-13
      • 1970-01-01
      相关资源
      最近更新 更多