sortable - 项目在拖动时更改上边距

Question

为什么拖动child的上边距和/或下边距会发生变化？ 我需要它们保持内联。

＆＃13;

＆＃13;

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

＆＃13;

.parent{
text-align:center;
}

.child{
display:inline-block;
padding:2px 9px;
border-radius:9px;
background:gold;
margin:0 9px;
cursor:pointer;
}

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将vertical-align: top;添加到.child

即可

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

.parent{
text-align:center;
}

.child{
display:inline-block;
padding:2px 9px;
border-radius:9px;
background:gold;
margin:0 9px;
cursor:pointer;
vertical-align: top;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>

Answer 2

我们这种风格

.parent > div { float: left; margin-left: 10px; background : gold; border-radius : 10px; padding:2px 9px; }

＆＃13;

＆＃13;

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

＆＃13;

 .parent > div { float: left; margin-left: 10px; background : gold; border-radius : 10px; padding:2px 9px; }

＆＃13;

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='parent'>
<div class='child'>323</div>
<div class='child'>525</div>
<div class='child'>727</div>
</div>

＆＃13;

＆＃13;

＆＃13;