Estou utilizando um template do bootstrap para fazer um pequeno supervisório. Nele, adicionei duas áreas de sortable connected lists, disponíveis no JQuery. As ul's
com os elementos das listas estão com atributo overflow-y: scroll
, para quando a quantidade de itens for elevada. Até aí funciona bem, porém, ao tentar arrastar o elemento de uma lista para outra, ele arrasta o scroll da própria ul
sem parar e, fora da própria lista o elemento simplesmente desaparece e só reaparece quando é solto na outra lista.
O código que estou executando é:
HTML:
<div class="box-body config">
<div class="row">
<div class="col-md-12">
<ul id="sortable" class="list-inline connectedSortable">
<li class="btn-default" style="list-style: none">Teste 2</li>
<li class="btn-default" style="list-style: none">Teste</li>
<li class="btn-default" style="list-style: none">Teste 2</li>
<li class="btn-default" style="list-style: none">Teste</li>
<li class="btn-default" style="list-style: none">Teste 2</li>
<li class="btn-default" style="list-style: none">Teste 2</li>
<li class="btn-default" style="list-style: none">Teste</li>
</ul>
</div>
</div>
</div>
JS:
$( "#sortable, #sortable2" ).sortable({connectWith: ".connectedSortable",
placeholder: "dashed-placeholder"});
CSS:
#sortable, #sortable2 {
list-style-type: none;
margin: 0; padding: 0;
}
#sortable li, #sortable2 li {
margin: 0 3px 3px 3px;
font-size: 1.4em;
}
Tentei também adicionando um helper: 'clone'
no JS porém sem sucesso.
Existe alguma outra maneira de fazer o item aparecer fora do ul
inicial?
Muito obrigado.