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

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

Sortable 设置容器的高度。让我们设置标签的高度自动。

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