javascript - 可排序列表会影响周围的其他元素

Question

我有两个列表 <ul>与 <li> -标签。用户应该能够随心所欲地移动它们；进入第一个或第二个 ul，等等。

除了每次用户开始拖动时，父元素都会改变它的尺寸外，一切正常。我不能给它一个固定的高度，因为如果有很多 <li> -tags，将出现第二行元素。 此外，如果我从该列表中隐藏一个元素，这些元素将“向上”移动，导致父元素获得一些额外的高度。

我的排序电话:

$("#myItems, #clothingItems").sortable({
    start: function (event, ui) { //prevent dragged item from clicking
        $(idname).addClass('noclick');
        $('#powerTip').hide();
    },
    zIndex: 100000,
    appendTo: "body",
    connectWith: "#myItems, #clothingItems",
    containment: '#mainMenu',
    drag: function (event) {
        $('#powerTip').hide();
    },
    stop: function () {
        $(idname).removeClass('noclick');
    }
});

还有一个直播版:http://wernersbacher.de/music/#items

PS:要隐藏元素，请单击它并选择“出售所选元素”。

Answer 1

您只需向您的类添加一个属性 .itemUL 并更改 min-height ，您的类将如下所示:

.itemUL
{
  display:flex //Add this
  list-style-type: none;
  padding: 9px 5px 0px 12px;
  margin: 0;
  margin-top: 10px;
  min-height: 92px; //Change this
  background: rgba(0, 0, 0, 0.09);
}

更新:

调整高度的 jquery 小技巧:

if($(".itemUL").width()>727)
{
   $(this).height($(this).height+92);
}

并且您的 .itemUL 将具有如下属性:

.itemUL {
  display: flex;
  flex-wrap: wrap; //Add this
  list-style-type: none;
  padding: 9px 5px 0px 12px;
  margin: 0;
  margin-top: 10px;
  min-height: 92px;
  background: rgba(0, 0, 0, 0.09);
}