拖动时项目跳到左侧

本文介绍了拖动时项目跳到左侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

$('#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拖动时会跳到左侧?

Why is title jumping to the left while dragging?

我尝试了withotut grida(只是普通的titles div作为父对象)，并且效果很好.

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

推荐答案

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

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.

解决方案

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

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*/
}

在线演示(jsFiddle)

这篇关于拖动时项目跳到左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！