jQuery UI sortable 使我的元素 "absolute" 在第二次拖动

Question

我第一次在此可排序列表中拖动元素时，效果很好。第二次，绝对定位，向左飞。

正如您在此看到的 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 更适合 static 定位，例如列表或表格。当您指定不同的定位时，jQuery 会尝试跟踪该位置并将值分配给 left 和 top（如果不是）需要。在您的情况下，一种简单的解决方案是避免在 booking-box 元素上设置定位。在 css 中更改此行：

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

有效：https://jsfiddle.net/03xqpkga/11/

如果你需要设置位置，那么你可以使用beforeStop事件来删除正在分配的left:

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

jQuery UI sortable 使我的元素 "absolute" 在第二次拖动

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

jquery

jquery-ui

jquery-ui-sortable

zurb-foundation

zurb-foundation-6