I'm using a bootstrap template to do a little tutorial. In it, I've added two sortable connected list areas, available in JQuery. The ul's
with the elements of the lists are with overflow-y: scroll
attribute, for when the quantity of items is high. While it works fine, however, when trying to drag the element from one list to another, it drags the scroll of the ul
itself without stopping, and outside the list itself the element simply disappears and only reappears when it is dropped on the other list.
ThecodeI'mrunningis:
HTML:
<divclass="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 tried also adding helper: 'clone'
to JS but to no avail.
Is there any other way to make the item appear outside of% initial%?
Many thanks.