jQuery UI sortable is making my element "absolute" on the 2nd drag

Question

The first time I drag an element in this sortable list, it works great. The second time, it positions absolute and flies over to the left.

As you can see in this fiddle http://jsfiddle.net/scotnery/d3pamtgo/7/

x.sortable({
    axis: 'y',
    handle: '.handle',
    placeholder: 'sortable-placeholder',
    opacity: 0.5,
    sort: function(event, ui){
        $(this).find('.numeral').each(function() {
            $(this).html("#");
        });
        // the handel item that was dragged
        handle = ui.item.find(".handle")
        handle.removeClass("fi-list").addClass("fi-shopping-bag");

        ui.item.addClass("freshest");
        $(".sortable-placeholder").height(ui.item.outerHeight());
    },
    stop: function(event,ui){
        ui.item.removeClass("freshest",{duration:1000});
        handle = ui.item.find(".handle");
        handle.removeClass("fi-shopping-bag").addClass("fi-list");
        // renumber each row in the html
        i = 1;
        $(this).find('.numeral').each(function() {
            $(this).html(i);
            i++;
        });
    },
    update: function (event, ui) {
        updateSort(this);
    }
}).disableSelection();

Answer 1

Sortable works better with static positioning, lists or tables for example. When you specify a different positioning, then jQuery tries to keep track of the position and assigns values to left and top when it's not needed. One simple solution in your case would be to avoid setting positioning on your booking-box elements. Change this line in your css:

.act-box, .ticket-box, .booking-box{ transition: background-color 1s ease;}

and it works: https://jsfiddle.net/03xqpkga/11/

If you need to set position, then you can use beforeStop event to remove the left that's being assigned:

 beforeStop: function(e, ui){
    ui.item[0].style.left = "";
 }