CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-sortable
FrenkyB
FrenkyB

Reputation: 7197

JQuery sortable elements not sortable and positioned to pointer

My problem is that I can not sort elements in my unordered list. The placeholder is always shown in the first row, where the first element is. (when I drag element). Oder elements are not moving at all and are not giving space to element currently dragging (which should be default functionality of sortable).

Here my code pen example

(to add elements to the list just click 'Add' several times. To enable sortable functionality, click button 'Sort'. To disable sortable functionality click 'Not sortable')

For sortable I have properties below:

$("#btnSortable").click(function() {
  $("#ulNotes").sortable({
    handle: '.divText',
    tolerance: 'pointer',
    placeholder: 'sortablePlaceholder',
    forcePlaceholderSize: true,
    forceHelperSize: true,
    cursorAt: {left: 0, top: 0}        
  });
});

Upvotes: 0

Views: 457

Answers (2)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

If you remove class="list-unstyled" and hold an element above another element it works !! I think that the problem is your css.

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<style>
     #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
     #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left; border:1px solid black;width:30%;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
</script>
</head>
<body>

    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
    </ul>
</body>

Upvotes: 1

Related Questions