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

我想使子对象在父对象内部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>

JS

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

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

这是一个

在拖动过程中如何使它们保持在一条直线上？

---

g

可排序设置contaner的高度。让我们设置自动标记的高度

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