javascript - 排序前后的页边距和对齐方式更改

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

.parent {
  text-align: justify;
  text-align-last: justify;
  width: calc(100% - 20px);
  margin: 14px auto;
  background: gold;
  overflow: hidden;
}

.child {
  display: inline-block;
  position: relative;
  cursor: cell;
  padding: 5px 9px;
  background: lightseagreen;
}

<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'>lorem ipsum lorem</div>
  <div class='child'>lorem ipsum lorem</div>
  <div class='child'>lorem ipsum lorem</div>
</div>

两个问题：


边距，即parent高度在拖动时发生变化。
粘贴项目后没有align:justify。

最佳答案

jQuery脚本似乎随机删除了项目上的inline-block，并且当它执行时，您的text-align: justify;将无效。

如果使用display: flex; justify-content: space-between;，效果会更好。

堆栈片段

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

.parent {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px);
  margin: 14px auto;
  background: gold;
  overflow: hidden;
}

.child {
  position: relative;
  cursor: cell;
  padding: 5px 9px;
  background: lightseagreen;
}

<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'>lorem ipsum lorem</div>
  <div class='child'>lorem ipsum lorem</div>
  <div class='child'>lorem ipsum lorem</div>
</div>