jQuery UI sortable 使我的元素在第二次拖动时“绝对”答案

【问题标题】：jQuery UI sortable is making my element "absolute" on the 2nd dragjQuery UI sortable 使我的元素在第二次拖动时“绝对”
【发布时间】：2018-03-23 20:34:27
【问题描述】：

我第一次在这个可排序列表中拖动一个元素时，效果很好。第二次，它定位绝对并飞到左边。

正如你在这个小提琴中看到的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();

【问题讨论】：

标签： jquery jquery-ui zurb-foundation jquery-ui-sortable zurb-foundation-6

【解决方案1】：

Sortable 更适用于 static 定位、列表或表格等。当您指定不同的定位时，jQuery 会尝试跟踪该位置并在不需要时将值分配给 left 和 top。在您的情况下，一种简单的解决方案是避免在您的预订框元素上设置定位。在你的 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 = "";
 }

【讨论】：