如何在拖动过程中将可排序元素保持在一行中

Question

我想让子项在 x 轴上的父项内可排序。它可以工作，但是在移动一个元素的过程中，其余的元素会改变它们的填充或边距，即它们会低于活动元素。

<div id='parent'>
<div class='tagup'>EARTH</div>
<div class='tagup'>SUN</div>
<div class='tagup'>MOON</div>
<div class='tagup'>VENUS</div>
</div>

CSS

#parent{
  padding:5px 10px;  
  background:lightgreen;
}
.tagup{
  display:inline-block;
  background:darkblue;
  color:white;
  text-align:center;
  border-radius:5px;
  cursor:pointer;
  padding:1px 5px;
  margin:3px;
}

JS

$('#parent').sortable({
axis: "x",
containment: 'parent',
tolerance: "pointer",
});

这是一个EXAMPLE

如何在拖拽过程中保持一行？ g

Answer 1

可排序设置容器的高度。让我们设置标签的高度自动。

.tagup{
  display:inline-block;
  height:auto !important; //Add this line
  background:darkblue;
  color:white;
  text-align:center;
  border-radius:5px;
  cursor:pointer;
  padding:1px 5px;
  margin:3px;
}

如何在拖动过程中将可排序元素保持在一行中

how to keep sortable elements in one line during dragging

jquery-ui

jquery-ui-sortable