Question

我有两个<ul>列表和<li>个标签。用户应该能够像他们想要的那样移动它们;进入第一个或第二个ul等。

除了每次用户开始拖动时，父元素都会改变它的维度。我无法给它一个固定的高度，因为如果有许多<li> - 标签，则会出现第二行元素。此外，如果我隐藏此列表中的元素，元素将会向上＆＃34;向上＆＃34;，从而导致父元素获得一些额外的高度。

我可以打电话：

$("#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：要隐藏元素，请单击它并选择＆＃34;出售所选项目＆＃34;。

Answer 1

您只需要在课程<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" id="input-user" data-name="username" name="username" value="" class="form-control input-user" /> <button type="submit" id="button-delete-user" class="btn btn-user-delete" disabled>GO</button> </form>中添加一个属性并更改.itemUL，您的课程将如下所示：

min-height

<强>更新

调整身高的轻微jquery技巧：

.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);
}

并且您的if($(".itemUL").width()>727) { $(this).height($(this).height+92); }还会有一个属性，如下所示：

.itemUL

Answer 2

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

我尝试将您的.item_container更改为float: left;概念（请参阅display，width和float属性）：

.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：当内容大于它时，需要对其进行拉伸。所以我还将overflow: hidden;添加到#myItems，这解决了这个特殊问题。

可排序列表会影响其他元素

2 个答案: