如何修复连接的可排序对象的错误定位的可拖动辅助对象(部分由浮动/相对定位的父元素引起)? [英] How to fix wrongly positioned draggable helpers for connected sortables (partially caused by floated/relative positioned parent elements)?
问题描述
我遇到一个问题，当使用放置在相对位置相对浮动的父元素中的可拖动对象+可排序对象时，可拖动辅助对象的偏移不正确.浮动的父元素是Bootstrap列，其中多个可排序列表放在一列中，而可拖动对象列表放在另一列中.
I'm experiencing a problem where the draggable helper is being offset incorrectly, when using draggables + sortables that are placed in floating, relative positioned parent elements. The floated parent elements are Bootstrap columns, where multiple sortable lists are placed in one column, and a list of draggables is placed in another.
这是一个有效的示例代码段
Here's a working example snippet
$('.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日更新 :我修改了代码示例，以更好地反映我的实际使用情况，在上面包含可拖动对象/可排序对象的行上方还有其他行
Update 16 Nov 2015 I've modified the code example to better reflect my actual usage context, where there are further rows above the one that holds the draggables/sortables.
a 截屏，以及显示发生情况的静止图像
a screencast, and a still image showing what happens
将其中一个可拖动对象从右侧列拖到左侧的一个可排序列表之一上，而不是将其拖放到可排序列表边界框之外，而是将其进一步拖出时，该助手的位置不正确，它向左移动了几百个像素，就好像它不正确地合并了某种偏移一样(看起来可能是原始的可拖动位置).
When dragging one of the draggables from right hand side column over one of the sortable lists on the left hand side, and not dropping it, but dragging it further out of the sortable lists bounding box, the helper is being positioned incorrectly, it shifts a few hundred pixels to the left, as if it's incorrectly incorporating some kind of offset (looks like it could be the the original draggable position).
有趣的是，当将可拖动对象与可排序对象放置在同一父元素中时，不会发生这种情况，至少不会水平移动，而是在将可拖动对象快速向上/向下或向左/向右移入/移出时垂直移动可排序列表.
Interestingly this doesn't occur when the draggables are placed in the same parent element as the sortables, at least it won't shift horizontally, but vertically when moving the draggable fast up/down or left/right in/out of the sortable list.
水平移动与浮动/相对定位的父元素某种程度上相关，从而禁用浮动或相对定位将其固定.但是，我想保持原样，而改用其他修复/替代方法.当不涉及浮动/相对定位时，也会发生垂直移动，所以我想这个问题还有很多.
The horizontal shift is somehow related to floated/relative positioned parent elements, disabling the floating or the relative positioning fixes it. However, I'd like to keep this as is, and find another fix/workaround instead. The vertical shifting also happens when floating/relative positioning isn't involved, so I guess there's a little more to this problem.
2015年11月15日更新-jQuery UI更改
Update 15 Nov 2015 - jQuery UI changes
就像jQuery UI 1.11.4一样，它的行为有所改变，现在它不会在离开可排序对象的边界框时立即水平移动，但是您必须先在两个或多个可排序对象之间移动.除此之外，越野车的行为似乎没有改变.
Looks like jQuery UI 1.11.4 changed the behavior a little, now it won't immediately shift horizontally the moment you leave the bounding box of a sortable, but you have to move between two or more sortables first. Other than that, the buggy behavior seems to be unchanged.
2015年11月16日更新-appendTo选项
Update 16 Nov 2015 - appendTo option
最初，我尝试使用appendTo一种解决方法，因为这样会将帮助器保留在列表之外，尽管对于我的原始示例代码而言这是正确的，但它不适用于更新的示例代码，在容纳可拖动对象/可排序对象的行上方放置了更多行，这导致助手在垂直方向移动.
Initially I've tried to use appendTo a workaround, as that way the helper would be kept outside of the lists, and while this is true for my original example code, it won't work with the updated example code, where further rows are placed above the ones that holds the draggables/sortables, they are causing the helper to shift vertically.
有人知道确切的水平偏移源于何处，以及如何在继续使用浮动/相对定位父元素的情况下对其进行修复?
Does anyone know where the problematic horizontal offset stems from exactly, and how to fix it while keep using floated/relative positioned parent elements?
垂直偏移又如何呢?看到这发生在 jQuery UI演示中也会让我认为这是与父元素样式无关的错误吗?
And what about the vertical offsetting, seeing that this happens in the jQuery UI demo too, makes me think that this is a bug that isn't related to the styling of parent elements?
2015年11月15日更新-出现垂直偏移问题
Update 15 Nov 2015 - Vertical offset problem located
垂直偏移似乎与可拖动对象上的页边距有关，但似乎没有问题.
The vertical offset seems to have to do with the margin applied on the draggables, without that it seems to work fine.
我都将它们都报告为错误，但是我仍在寻找一种解决方案/变通办法，可以在库中修复或未修复此问题之前应用自己.
I've reported both as bugs, but I'm still looking for a fix/workaround that I can apply myself until this may or may not be fixed in the library.
http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806
http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806
推荐答案
奇怪的是，它与 jquery-ui 10.4 一起使用似乎效果更好.区别在于，在10.4版中，可拖动帮助程序保留在其原始div中，并且被克隆到可排序对象中但被隐藏了.因此计算更容易进行.
What is strange is that it seems to work better with jquery-ui 10.4. The difference is that in 10.4 the draggable helper stays in its original div, and is cloned into the sortables but hidden. So calculations are easier to make.
在11.4中，帮助程序被附加到可拖动对象的可排序对象上，这使得精确的偏移量计算难以进行.您经常需要更改父偏移量，并跟踪它在哪个可排序，在哪个可排序，可排序的位置等方面.显然那里有一个错误.
In 11.4, the helper is appended to the sortable over which it is dragged, which makes the precise offset calculations hard to follow. You constantly have to change the parent offset, and keep track of over which sortable it is, over which sortable it was, the position of the sortable and so on. And clearly there is a bug there.
一个简单的解决方案是从10.4获取 connectToSortable 插件.您必须检查是否有有害的副作用，但是很快它就可以了.您可以使用其他名称，以便保留原始名称.像这样:
One simple solution would be to get the connectToSortable plugin from 10.4. You'll have to check for unwanted side effects, but quickly it seems to be working. You can use a different name so that you keep the original. Like this:
$.ui.plugin.add("draggable", "connectToSortable104", {
// You take the whole connectToSortable plugin from
// here: https://code.jquery.com/ui/1.10.4/jquery-ui.js
// In 11.4 you'll need to add draggable parameter
// for example: to the event methods,
// start: function(event, ui, draggable)
...
请参见 http://jsfiddle.net/gsnojkbc/2/
我不认为额外的div是导致问题的原因，它确实是导致问题的 connectToSortable 在jquery 11.4中起作用的一个错误.为了允许在 sortables 中移动帮助程序并仍然跟踪正确的偏移量，您需要在每次辅助程序更改div时重新调整一些数据.这样做有两个缺陷:
I don't think the additional div is what causes the problem, it's really a bug with the way the connectToSortable works in jquery 11.4 that is causing the issue. To allow moving the helper in the sortables and still keep track of the proper offset, you need to readjust some data each time the helper changes div. There's two flaws in the way it's done:
第一个是存在 refreshOffsets 方法，该方法对于 可拖动中的其他事件.例如，当您单击一个 可拖动的.因此，它尝试根据 点击.但是，从可排序事件中调用 refreshOffsets 时，它会 弄乱了点击偏移量.这可以通过改变来解决 refreshOffsets 方法，以便不考虑 event.pageX 和Y. 像这样:
First one is that there's a refreshOffsets method that is common to other events in draggable. It's used for example when you click on a draggable. And so it tries to calculate the offset based on the click. But when calling refreshOffsets from the sortable event, it messes the click offset. This can be solved by changing refreshOffsets method so as not to consider the event.pageX and Y. Like this:
$.ui.draggable.prototype._refreshOffsetsSortable = function(event, draggable){
this.offset = {
top: this.positionAbs.top - this.margins.top,
left: this.positionAbs.left - this.margins.left,
scroll: false,
parent: this._getParentOffset(),
relative: this._getRelativeOffset()
};
this.offset.click = draggable.offset.click;
}
另一个问题的发生是因为您有许多 sortables .基本上 另一个需要做的操作是更改父项 抵消.现在完成的方式是保存以前的 父母通常它可以正常工作，但是如果您移动得太快，则序列 这样可以使保存的父级成为可排序而不是原始父级 父母您可以通过在拖动开始时保存父项来解决此问题， 任何情况下似乎都更有意义.像这样:
The other problem happens because you have many sortables. Basically the other operation that needs to be done is change the parent offset. The way it's done right now is that it saves the previous parent. Normally it works but if you move too fast, the sequence makes it so that the saved parent is a sortable and not the original parent. You can fix this by saving the parent on drag start, which in any case makes seems to make more sense. Like this:
$.ui.plugin.add( "draggable", "connectToSortableFixed", {
start: function( event, ui, draggable ) {
var uiSortable = $.extend( {}, ui, {
item: draggable.element
});
draggable._parent = this.parent();
...
请参阅此处: http://jsfiddle.net/24a8q49j/1/
这篇关于如何修复连接的可排序对象的错误定位的可拖动辅助对象(部分由浮动/相对定位的父元素引起)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
