0

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.

inserir a descrição da imagem aqui

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.

1 Resposta 1

1

Resolvido! Adicionei os seguintes atributos ao .sortable:

$("#sortable1, #sortable2").sortable({
  appendTo: document.body,
  helper: "clone",

Fonte: StackOverflow - jQuery UI Sortable connected list css issues

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .