可排序列表影响周围的其他元素答案

【问题标题】：sortable list affects other elements around可排序列表影响周围的其他元素
【发布时间】：2015-05-08 12:21:27
【问题描述】：

我有两个列表<ul> 和<li>-tags。用户应该能够随心所欲地移动它们；进入第一个或第二个 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：要隐藏一个元素，请点击它并选择“Sell Selected Items”。

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-sortable

【解决方案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);
}

【讨论】：

问题是如果元素太多，就没有新行了。添加 `flex-wrap: wrap;` 就可以了！谢谢
@wernersbacher.. 更新了答案.. 请检查并告诉我！！

【解决方案2】：

看起来sortable 在拖动时会在您的元素前自动添加一个新行；只要您的元素显示为内联块，就会导致上述问题。

我尝试将您的 .item_container 更改为 float: left; 概念（请参阅显示、宽度和浮动属性）：

.item_container {
  position: relative;
  display: block;
  width: 65px;
  float: left;
  cursor: pointer;
  box-shadow: 0px 1px 4px -2px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.21);
  margin-right: 10px;
  margin-bottom: 11px;
  margin-top: 1px;
}

它可以在不改变高度的情况下工作。

现在唯一要修复的是ul：当内容大于它时，它需要被拉伸。所以我还在#myItems 中添加了overflow: hidden;，这解决了这个特殊问题。

【讨论】：