Question

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

为什么title拖动时跳到左侧？

我尝试了withotut grida（作为父级，只是普通的titles div），并且效果很好。

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

Answer 1

它来自position。 grida类具有position: fixed;。在固定位置，最终位置由top，right，bottom和left的值确定。 grida具有left:0; top:29px;，因此会导致向左跳。

解决方案

您可以将position: relative;添加到titles，以使titles的子元素（例如title）相对于其正常位置定位。

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

Online demo (jsFiddle)

拖动时项目跳到左侧

1 个答案: