前言
我遇到了一个问题,当使用放置在浮动、相对定位的父元素中的可拖拽+可排序元素时,可拖拽助手被错误地偏移。 浮动的父元素是Bootstrap列,在其中一个列中放置了多个可排序列表,并在另一个列中放置了一个可拖拽项列表。
示例
这是一个工作示例片段:
$('.sortable').sortable({
connectWith: '.sortable',
revert: 600,
forcePlaceholderSize: true,
placeholder: 'ui-sortable-placeholder',
tolerance: 'pointer'
}).disableSelection();
$('.draggable').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: true
}).disableSelection();
.sortable-container {
display: inline-block;
width: 100px;
vertical-align: top;
}
.sortable {
cursor: move;
margin: 0;
padding: 0;
list-style-type: none;
vertical-align: top;
border: 1px solid #000;
}
.ui-sortable-placeholder {
background: #ff0000;
}
#draggables {
margin: 0;
padding: 0;
list-style-type: none;
}
.draggable {
margin: 4px;
cursor: move;
color: #fff;
background: #5dd1ff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class='container-fluid'>
<div class="row">
<div class="col-xs-3">
<p>foo</p>
<p>bar</p>
</div>
<div class="col-xs-3">
<p>foo</p>
<p>bar</p>
</div>
<div class="col-xs-6">
<p>foo</p>
<p>bar</p>
</div>
</div>
<div class='row'>
<div class='col-xs-6'>
<div id='sortables'>
<div class='sortable-container'>
<ul class='sortable'>
<li>sortable 1</li>
<li>sortable 2</li>
<li>sortable 3</li>
<li>sortable 4</li>
<li>sortable 5</li>
<li>sortable 6</li>
</ul>
</div>
<div class='sortable-container'>
<ul class='sortable'>
<li>sortable 1</li>
<li>sortable 2</li>
<li>sortable 3</li>
<li>sortable 4</li>
<li>sortable 5</li>
<li>sortable 6</li>
</ul>
</div>
<div class='sortable-container'>
<ul class='sortable'>
<li>sortable 1</li>
<li>sortable 2</li>
<li>sortable 3</li>
<li>sortable 4</li>
<li>sortable 5</li>
<li>sortable 6</li>
</ul>
</div>
</div>
</div>
<div class='col-xs-6'>
<ul id='draggables'>
<li class='draggable'>draggable 1</li>
<li class='draggable'>draggable 2</li>
<li class='draggable'>draggable 3</li>
</ul>
</div>
</div>
</div>
2015年11月16日更新 我已修改代码示例,以更好地反映我的实际使用情况,在拖动项/可排序项所在行的上方还有其他行的情况下。
一个屏幕录像和一张静态图片显示了发生的情况
进一步解释
当从右侧列拖动其中任意一个可拖动项到左侧可排序列表之一时,不放置,而是将其拖离可排序列表的边界框时,助手的位置会出现错误,它会向左移动几百个像素,就好像它错误地合并了某种偏移量(看起来像是原始可拖动项的位置)。
有趣的是,当可拖动项与可排序项放置在同一个父元素中时,水平方向上不会移位,但是在可排序列表中快速上下或左右移动可拖动项时,会发生垂直方向的移位。
水平移位与浮动/相对定位的父元素有关,禁用浮动或相对定位可以修复它。但是,我想保留这种状态,并找到另一种修复/解决方法。即使没有浮动/相对定位,垂直移位也会发生,所以我猜这个问题还有点其他问题。
2015年11月15日更新 - jQuery UI更改
看起来jQuery UI 1.11.4对行为进行了一些更改,现在当您离开可排序列表的边框时,它不会立即水平移位了,而是必须在两个或多个可排序项之间移动。除此之外,错误的行为似乎没有改变。
2015年11月16日更新 - appendTo
选项
最初我尝试使用appendTo
作为解决方法,因为那样助手将被保持在列表之外,虽然在我的原始示例代码中这是正确的,但在更新的示例代码中不起作用,因为拖动项/可排序项所在的行之上还有其他行,这些行会导致助手在垂直方向上移位。
问题
有人知道水平偏移的问题出现在哪里,如何在保持浮动/相对定位的父元素的同时修复它吗?
垂直偏移问题是什么原因呢? 这似乎是一个与父元素样式无关的错误,因为它也在jQuery UI演示中发生。
2015年11月15日更新 - 定位垂直偏移问题位置
垂直偏移似乎与拖动元素应用的外边距有关,如果没有外边距,它似乎可以正常工作。
我已经报告了这两个问题,但我仍在寻找一种修复/解决方法,以便在库中可能或可能不会修复这个问题之前自行应用。
http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806