item jumps to the left while dragging

问题

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

.grida{
	position:fixed;
	left:0; top:29px; width:100%;
	height:calc(100% - 29px);
	overflow:hidden;
	display:grid;
	grid-template-columns:134px auto;
	grid-gap: 5px;
	padding:5px;
}

.titles{
	height:calc(100% - 30px);
	overflow-y:scroll;
	padding:7px 0;
}

.title{
	margin:2px 0;
	padding:2px 7px;
	cursor:cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='grida'>
<div class='before'>before</div>
<div class='titles' id='titles'>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
<div class='title'>lorem ipsum</div>
</div>
</div>

Why is title jumping to the left while dragging?

I tried withotut grida (just plain titles div as parent) and it works fine.

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

回答1:

It comes from position. grida class has position: fixed;.In fixed position, final position is determined by the values of top, right, bottom, and left. grida has left:0; top:29px; and so, it causes jumping to left.

Solution

You can add position: relative; to titles that the children elements of titles e.g title is positioned relative to its normal position.

.titles {
  height: calc(100% - 30px);
  overflow-y: scroll;
  padding: 7px 0;
  position: relative;  /*Add this*/
}

Online demo (jsFiddle)

来源：https://stackoverflow.com/questions/51920674/item-jumps-to-the-left-while-dragging