Jquery ui sortable doesn't swap properly

Question

Not sure why it doesn't swap properly. I did a demo in https://jsfiddle.net/33keyjxx/ to show the problem.

$(".draggable-portlets .sorted" ).sortable({
                    connectWith: ".draggable-portlets .sorted",
                    handle: '.panel-heading',
                    start: function()
                    {
                        $draggable_portlets.addClass('dragging');
                    },
                    stop: function()
                    {
                        $draggable_portlets.removeClass('dragging');
                    }
                });

Any thought on this?

Answer 1

You could checkout my solution . The root cause here seems to be that the ui-sortable class must be the wrapper of all sortable items, not one of them.

<div class="ui-sortable">
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
</div>