Prefacio

Estoy experimentando un problema en el que el ayudante arrastrable se está compensando incorrectamente, cuando uso draggables + ordenables que se colocan en elementos primarios flotantes, posicionados en relación relativa. Los elementos primarios flotantes son columnas Bootstrap, donde se colocan varias listas ordenables en una columna, y una lista de arrastrables en otra.

Ejemplo

Aquí hay un fragmento de ejemplo de trabajo

$('.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>

Actualización 16 nov 2015 Modifiqué el ejemplo de código para reflejar mejor mi contexto de uso real, donde hay más filas por encima de la que contiene los elementos arrastrables / ordenables.

a screencasty una imagen fija que muestra lo que sucede

Explicación adicional

Al arrastrar uno de los draggables de la columna del lado derecho sobre una de las listas ordenables en el lado izquierdo, y no soltarlo, sino arrastrarlo más fuera del cuadro delimitador de listas ordenables, el ayudante se coloca incorrectamente, se desplaza un unos cientos de píxeles a la izquierda, como si incorporara incorrectamente algún tipo de desplazamiento (parece que podría ser la posición arrastrable original).

Curiosamente, esto no ocurre cuando los draggables se colocan en el mismo elemento padre que los ordenables, al menos no se desplazará horizontalmente, sino verticalmente al mover el arrastre rápido hacia arriba / abajo o hacia la izquierda / derecha dentro / fuera de la lista ordenable .

El desplazamiento horizontal está relacionado de alguna manera con elementos primarios posicionados flotantes / relativos, deshabilitando el posicionamiento flotante o relativo. Sin embargo, me gustaría mantener esto como está, y encontrar otra solución / solución alternativa en su lugar. El desplazamiento vertical también ocurre cuando el posicionamiento flotante / relativo no está involucrado, así que supongo que hay un poco más de este problema.

Actualización 15 nov 2015 - jQuery UI cambia

Parece que jQuery UI 1.11.4 cambió un poco el comportamiento, ahora no cambiará inmediatamente horizontalmente en el momento en que abandones el cuadro delimitador de un ordenable, pero primero debes moverte entre dos o más ordenables. Aparte de eso, el comportamiento con errores parece no haber cambiado.

Actualización 16 nov 2015 - appendTo opción

Inicialmente he tratado de usarappendTo una solución alternativa, ya que de esa manera el ayudante se mantendría fuera de las listas, y si bien esto es cierto para mi código de ejemplo original, no funcionará con el código de ejemplo actualizado, donde se colocan más filas sobre las que contienen los elementos arrastrables / ordenables, están causando que el ayudante se desplace verticalmente.

Pregunta

¿Alguien sabe de dónde proviene exactamente el problema del desplazamiento horizontal problemático y cómo solucionarlo mientras se siguen utilizando elementos primarios posicionados en posición flotante / relativa?

¿Y qué pasa con la compensación vertical, ya que esto sucede enla demostración de la interfaz de usuario jQuery También, ¿me hace pensar que este es un error que no está relacionado con el estilo de los elementos principales?

Actualización 15 nov 2015 - Problema de desplazamiento vertical ubicado

El desplazamiento vertical parece tener que ver con el margen aplicado en los draggables, sin que parezca funcionar bien.

He informado de ambos como errores, pero todavía estoy buscando una solución / solución que pueda aplicarme hasta que esto pueda o no repararse en la biblioteca.

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