对具有固定位置值的 DOM 元素进行排序（例如：left:20px）

Question

各位专家大家好我的问题是关于 jquery。我正在使用 draggable dropabble methods.I 有一个 droppable div(parent) 。将元素（本身是 div）拖放到可放置 div (parent div) 的左侧时，元素会附加到左侧 ...如果靠近右边它附加到右边。

为此，我使用左右定位（eg:left:30px，right:40px）。我也使用了左右浮动。

到这里它工作完美。

现在我也想实现排序...我的意思是可放置容器 (parent div) 中的元素也应该排序。为此，我使用了 ui.sortable .但是它不起作用，因为 DOM 元素有一个固定的位置，所以它不排序。

现在我尝试在第一次尝试排序时更改 DOM 元素的 css

 $( ".parent" ).sortable({
        placeholder: "highlight",
        stop:function(event,ui){
        $(".parent").children("div").css("float","left");
        $(".parent").children("div").css("position","relative");
        $(".parent").children("div").css("right","");
        $(".parent").children("div").css("left","");
        }  });

上面的代码在第一次尝试时没有排序，而是根据代码中的 DOM 位置重新排列 DOM 元素。在第一次尝试后，它更改了 css 和它排序完美。我想在不重新排列 child divs

的情况下对第一次尝试进行排序

注意： sortable 不起作用，因为我已经给出了 dom 位置..或浮点值....

我希望我能展示一个完整的演示，但我做不到。不过我做了一个小演示。首先在此处观看此 This Here You cant sort item 3 with others. Now watch this . Click 它有效，但在第一次尝试时它只是重新排列，然后它对我的问题有效 perfectly.Simillar 。请阅读我上面的问题并查看两个演示

如果有人知道解决办法请告诉我。

Answer 1

好的，所以我在此处编辑了您的 fiddle 以重新排序 div，以便排序有效。基本上，有 2 个步骤：

$('#sortable li').each(function(index){
    $(this).attr('data-orgleft',$(this).offset().left);
    $(this).css({float:"left",position:"relative"});
});

遍历所有列表元素，查看它们在页面上的位置，并将它们的位置分配给属性（也可以在此处使用 .data()，但在 dom 中不太明显）。在这样做的同时，我们还删除了 'float' 并将位置设置为 relative.

var $wrapper = $('#sortable');
$wrapper.find('li').sort(function (a, b) {
    return +a.dataset.orgleft - +b.dataset.orgleft;
})
.appendTo( $wrapper );

然后我们根据这个数据属性对 div 进行排序，如另一个问题中的 here 所示。这样一来，您就可以从一开始就正常使用 sortable 。（在您的应用程序中，您需要将其放入一个函数中，并在每次放入 div 时调用它）

以防万一你的 draggables 会延伸到多行，重新排序它们的方式与 here 中一样，基本上它在顶部和左侧排序。

$wrapper.find('li').sort(function(a,b){
    var x = a.dataset.orgtop - b.dataset.orgtop;
    return x == 0? a.dataset.orgleft - +b.dataset.orgleft : x;
}).appendTo( $wrapper );

对具有固定位置值的 DOM 元素进行排序（例如：left:20px）

Sorting of DOM elements which have fixed position values (for eg: left:20px)

javascript

jquery

jquery-ui

droppable

jquery-ui-sortable