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

如何在拖动过程中将它们保持在一行？克

Answer 1

可分类设置容器的高度。让我们设置标签的高度auto。

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

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

1 个答案: