jQueryUI Sortable Item Incorrect Position While Dragging

Question

I have a jQueryUI sortable list which contains three `bootstrap` panels, panels 1 and 2 start dragging with the correct initial positions, however whenever you try to drag panel 3 it drops under panel 1 offset from the cursor. Live demo HTML ```

1
2
3

``` JavaScript ``` $('#sortable').sortable({ tolerance: 'pointer', handle: '.panel-heading', placeholder: 'col-xs-4 panel-al-placeholder', start: function (e, ui) { ui.placeholder.height(ui.item.children().height()); } }); ``` CSS ``` ul { width: 650px; list-style:…

Accepted Answer

I had a similar problem, setting the helper to clone mode worked for me:

```
$('#sortable').sortable({
    helper: 'clone'
});
```

jQueryUI Sortable Item Incorrect Position While Dragging

Solution

Problem