Bootstrap + sortable with Jquery, helper problem

Question

I’m using a bootstrap template to do a small supervisory. In it, I added two areas of sortable Connected lists, available in Jquery. The ul's list elements are assigned overflow-y: scroll, for when the number of items is high. So far it works well, however, when trying to drag the element from one list to another, it drags the scroll itself ul without stopping and, outside the list itself the element simply disappears and only reappears when it is released in the other list.

The code I’m running is:

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;
     }

I also tried adding a helper: 'clone' in JS but without success. Is there any other way to make the item appear outside the ul initial? Thank you very much.

Answer 1

Solved! I added the following attributes to .sortable:

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

Source: Stackoverflow - jQuery UI Sortable Connected list css issues