1

$('#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 Answer 1

0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.