Bootstrap + sortable with JQuery, problem with helper

Navigation
0

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.

    
asked by anonymous 18.05.2016 / 02:44

1 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

    
18.05.2016 / 03:52
Dynamic Request between development environment and Production Get path using the user's location to the default Marker (javascript google-mapsv3)