Prefácio

Estou enfrentando um problema em que o auxiliar arrastável está sendo deslocado incorretamente, ao usar arrastáveis + classificáveis que são colocados em elementos pai posicionados em relação flutuante. Os elementos pai flutuantes são colunas Bootstrap, onde várias listas classificáveis são colocadas em uma coluna e uma lista de arrastáveis é colocada em outra.

Exemplo

Aqui está um exemplo de trecho de trabalho

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

Atualização 16 de novembro de 2015 Modifiquei o exemplo de código para refletir melhor meu contexto de uso real, onde há mais linhas acima da que contém os arrastáveis / classificáveis.

a screencaste uma imagem parada mostrando o que acontece

Mais explicações

Ao arrastar um dos arrastáveis da coluna do lado direito sobre uma das listas classificáveis do lado esquerdo e não soltá-lo, mas arrastando-o ainda mais para fora da caixa delimitadora das listas classificáveis, o auxiliar está sendo posicionado incorretamente; algumas centenas de pixels à esquerda, como se estivesse incorporando incorretamente algum tipo de deslocamento (parece que poderia ser a posição arrastável original).

Curiosamente, isso não ocorre quando os draggables são colocados no mesmo elemento pai dos classificáveis, pelo menos não muda horizontalmente, mas verticalmente ao mover o arrastável para cima / baixo ou esquerda / direita dentro / fora da lista classificável .

O deslocamento horizontal está de alguma forma relacionado aos elementos-pai flutuados / posicionados em relação, desabilitando o posicionamento flutuante ou relativo. No entanto, eu gostaria de manter isso como está e encontrar outra correção / solução alternativa. A mudança vertical também acontece quando o posicionamento flutuante / relativo não está envolvido, então acho que há um pouco mais a esse problema.

Atualização 15 de novembro de 2015 - alterações na interface do jQuery

Parece que a interface do usuário do jQuery 1.11.4 mudou um pouco o comportamento, agora não muda imediatamente na horizontal no momento em que você deixa a caixa delimitadora de uma classificável, mas é necessário mover-se entre duas ou mais classificáveis primeiro. Fora isso, o comportamento do buggy parece inalterado.

Atualização 16 de novembro de 2015 - appendTo opção

Inicialmente eu tentei usarappendTo uma solução alternativa, pois assim o ajudante seria mantido fora das listas e, embora isso seja verdade para o meu código de exemplo original, ele não funcionará com o código de exemplo atualizado, onde outras linhas são colocadas acima das que contêm os draggables / classificáveis, eles estão fazendo com que o auxiliar mude verticalmente.

Pergunta, questão

Alguém sabe de onde exatamente o deslocamento horizontal problemático se origina e como corrigi-lo enquanto continua usando elementos-pai posicionados em posição flutuante / relativa?

E o deslocamento vertical, visto que isso acontece ema demonstração da interface do usuário do jQuery também, me faz pensar que este é um bug que não está relacionado ao estilo dos elementos pai?

Atualização 15 de novembro de 2015 - Problema de deslocamento vertical localizado

O deslocamento vertical parece ter a ver com a margem aplicada nos draggables, sem que isso pareça funcionar bem.

Eu relatei os dois como bugs, mas ainda estou procurando uma correção / solução alternativa que possa ser aplicada até que isso possa ou não ser corrigido na biblioteca.

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