Question

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

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

<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>

当我第一次拖动child时 - 没关系当我再次拖动时 - 它会改变边距从position:relative中删除child - 解决了问题，但我需要position:relative，因为我内部还有absolute个问题。

Answer 1

在做了一些研究后，似乎这是jQuery UI库中的一个小故障。我为你写了一个简单的工作。

从此处更改此代码：

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

到此：

$('.parent').sortable({
  stop: function() {
    $('.child').each(function() {
      $(this).css('top', '');
    });
  },
  containment: "parent",
  axis: "x",
  tolerance: 'intersect'
});

出于某种原因，jQuery UI在子类移动后向子类添加了一个css top属性。删除当前拖动项目后运行的Stop函数会手动删除该top属性。

这是工作小提琴：

https://jsfiddle.net/p2709umw/

当位置相对时，draggable元素会更改其边距

1 个答案: