css – 如何解决错误定位的可拖动帮助器的连接排序(部分由浮动/相对位置的父元素引起)？

前言

当使用放置在浮动的相对位置的父元素中的draggables sortables时，我遇到一个问题，其中draggable帮助器被错误地偏移。浮动的父元素是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日我修改了代码示例，以更好地反映我的实际使用上下文，其中还有一行存在draggables /可排序的行。

一个 screencast，还有一个静止的图像显示了什么

进一步说明

当从左侧的一个可排序列表中拖动其中一个拖动鼠标时，将其拖动到左侧的一个可排序列表中，而不是将其拖放到可排序列表边界框之外，帮助器正确定位不正确，左边几百个像素，好像它错误地加入了某种偏移(看起来可能是原来的可拖动位置)。

有趣的是，当draggables放置在与可排序列表相同的父元素中时，这不会发生，至少它不会水平移动，而是垂直移动可拖动快速上/下或左/右进入可排序列表。

水平移位与漂浮/相对定位的父元素有关，禁用浮动或相对定位修复它。但是，我想保持原样，并找到另一个修复/解决方法。当浮动/相对定位不涉及时，垂直移位也会发生，所以我想这个问题还有一点点。

更新2015年11月15日 – jQuery UI更改

看起来像jQuery UI 1.11.4改变了一点行为，现在它不会立即水平移动的那一刻你离开可排序的边框，但你必须首先在两个或更多的排序之间移动。除此之外，越野车行为似乎没有变化。

更新2015年11月16日 – appendTo选项

最初我试图使用appendTo一个解决方法，就像帮助者将被保留在列表之外的那样，而对于我的原始示例代码来说，这是正确的，它不会与更新的示例代码一起使用，其中更多的行是放置在保存draggables / sortable的那些上方，它们使帮助器垂直移动。

题

有没有人知道有问题的水平偏移源于何处，以及如何修复它，同时保持使用浮动/相对位置的父元素？

而垂直偏移呢，看到这也发生在the jQuery UI demo，这让我觉得这是一个与父元素造型无关的错误？

更新2015年11月15日 – 垂直偏移问题位于

垂直偏移似乎与应用于拖拉的边距有关，不过它似乎工作正常。

我已经报告了这两个错误，但我仍然在寻找一个修复/解决方法，我可以自己应用，直到这可能或可能不会在库中修复。

http://bugs.jqueryui.com/ticket/14822
http://bugs.jqueryui.com/ticket/14806

解决方法

奇怪的是，似乎在jquery-ui 10.4中更好地工作。不同的是，在10.4中，draggable帮助器保留在其原始div中，并被克隆到可排序项中，但被隐藏。所以计算比较容易做到。

在11.4中，帮助器被附加到被拖动的排序中，这使得精确的偏移计算难以遵循。您不断要更改父偏移量，并跟踪可排序的排序方式，排序方式等等。显然这里有一个bug。

一个简单的解决方案是从10.4获取connectToSortable插件。你必须检查不必要的副作用，但很快似乎工作。您可以使用不同的名称，以便保留原件。喜欢这个：

$.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中导致问题的工作方式。为了允许在可排序项中移动帮助器，并且仍然跟踪正确的偏移量，您需要在每次帮助者更改div时重新调整一些数据。它的完成方式有两个缺点：

首先是一个常见的refreshOffset方法
其他事件在draggable。例如，当您点击a
拖动。所以它试图计算基于的偏移量
单击。但是，从可排序事件调用refreshOffsets时，它
混乱点击偏移。这可以通过改变来解决
refreshOffsets方法，以便不考虑event.pageX和Y.
喜欢这个：

$.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;
    }

发生另一个问题是因为您有很多可排序。基本上
需要做的其他操作是改变父母
抵消。现在的方式是保存以前的
家长。通常它的工作，但如果你移动太快，顺序
使得保存的父母是可排序的，而不是原始的
家长。您可以通过保存父项拖动启动来解决这个问题
任何情况似乎更有意义。喜欢这个：

$.ui.plugin.add( "draggable","connectToSortableFixed",{
    start: function( event,draggable ) {
        var uiSortable = $.extend( {},{
            item: draggable.element
        });
        draggable._parent = this.parent();
...

见：http://jsfiddle.net/24a8q49j/1/

css – 如何解决错误定位的可拖动帮助器的连接排序(部分由浮动/相对位置的父元素引起)？

解决方法

相关文章