Vorwor

Es tritt ein Problem auf, bei dem der Draggable-Helper falsch versetzt wird, wenn Draggables + Sortables verwendet werden, die in schwebenden, relativ positionierten übergeordneten Elementen platziert sind. Die schwebenden übergeordneten Elemente sind Bootstrap-Spalten, in denen mehrere sortierbare Listen in einer Spalte und eine Liste von Draggables in einer anderen Spalte platziert sind.

Beispie

Hier ist ein funktionierendes Beispiel-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>

Update 16. November 2015 Ich habe das Codebeispiel geändert, um den tatsächlichen Verwendungskontext besser widerzuspiegeln. Über der Zeile, in der sich die Draggables / Sortables befinden, befinden sich weitere Zeilen.

a screencast und ein Standbild, das zeigt, was passiert

Weitere Erklärung

Wenn Sie eines der Draggables aus der rechten Spalte über eine der sortierbaren Listen auf der linken Seite ziehen und es nicht ablegen, sondern weiter aus dem Begrenzungsrahmen für sortierbare Listen ziehen, wird der Helfer falsch positioniert und verschoben Ein paar hundert Pixel nach links, als würde ein Versatz fälschlicherweise eingefügt (es könnte sich um die ursprüngliche ziehbare Position handeln).

Interessanterweise tritt dies nicht auf, wenn die Draggables im selben übergeordneten Element wie die Sortables platziert sind. Zumindest wird sie nicht horizontal verschoben, sondern vertikal, wenn die Draggable schnell nach oben / unten oder links / rechts in die Sortable verschoben werden aufführen

Die horizontale Verschiebung hängt irgendwie mit schwebenden / relativ positionierten übergeordneten Elementen zusammen, und das Deaktivieren der schwebenden oder relativen Positionierung behebt dies. Ich möchte dies jedoch beibehalten und stattdessen einen anderen Fix bzw. eine andere Problemumgehung finden. Die vertikale Verschiebung tritt auch auf, wenn keine schwebende / relative Positionierung beteiligt ist. Ich denke, dass dieses Problem noch ein bisschen mehr beinhaltet.

Update 15. November 2015 - Änderungen an der jQuery-Benutzeroberfläche

Sieht aus wie jQuery UI 1.11.4 hat sich das Verhalten ein wenig geändert, jetzt wird es nicht sofort horizontal verschoben, sobald Sie den Begrenzungsrahmen einer sortierbaren Datei verlassen, sondern Sie müssen zuerst zwischen zwei oder mehr sortierbaren Dateien wechseln. Ansonsten scheint das Verhalten des Buggys unverändert zu sein.

Update 16. November 2015 - appendTo Möglichkei

Anfänglich habe ich versucht, @ zu verwendappendTo eine Problemumgehung, da der Helfer auf diese Weise außerhalb der Listen bleibt. Dies gilt zwar für meinen ursprünglichen Beispielcode, funktioniert jedoch nicht mit dem aktualisierten Beispielcode, bei dem weitere Zeilen über den Zeilen mit dem Code platziert werden Draggables / Sortables bewirken, dass der Helfer vertikal verschoben wird.

Frag

Weiß jemand, woher der problematische horizontale Versatz genau stammt und wie er behoben werden kann, während weiterhin schwebende / relativ positionierte übergeordnete Elemente verwendet werden?

Und was ist mit der vertikalen Kompensation, da dies in @ passierthe jQuery UI Demo Auch lässt mich denken, dass dies ein Fehler ist, der nicht mit dem Stylen von übergeordneten Elementen zusammenhängt?

Update 15. November 2015 - Vertikalversatzproblem lokalisiert

Der vertikale Versatz scheint mit dem auf die Draggables angewendeten Rand zu tun zu haben, ohne dass dies in Ordnung zu sein scheint.

Ich habe beide als Fehler gemeldet, suche aber immer noch nach einer Lösung / Problemumgehung, die ich selbst anwenden kann, bis dies möglicherweise in der Bibliothek behoben ist oder nicht.

http: //bugs.jqueryui.com/ticket/1482
http: //bugs.jqueryui.com/ticket/1480