перетаскиваемый элемент меняет свои поля, когда положение относительно

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 добавляет атрибут css top к дочернему элементукласс после того, как он переехал.Функция Stop, которая запускается после удаления перетаскиваемого элемента, вручную удаляет этот атрибут top.

Вот рабочая скрипка:

https://jsfiddle.net/p2709umw/