排序具有固定位置值的DOM元素(例如:left:20px)

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

本文关键字：例如 元素 left 20px DOM 定位 位置 排序      更新时间：2023-09-26

大家好我的问题是关于jquery的。我使用可拖放方法。我有一个可拉的div(parent)。当把一个元素(它本身就是一个div)拖放到可拉div(父div)的左边时，元素会被附加到左边。

对于这个我使用左右定位(例如:左:30px，右:40px)。我也使用了float right left。

现在我也想实现排序…我的意思是在可拉的容器(父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，并完美地排序。我希望在第一次尝试时进行排序，而不重新排列子div

注意:排序不工作，因为我已经给出了dom位置..或浮动值....

我希望我能展示一个完整的演示，但我不能。然而，我已经做了一个小的演示。首先看这个这个这里你不能把项目3和其他的分类。现在看这个。点击这里，它的工作，但在第一次尝试，它只是重新排列，之后，它的工作完美。和我的问题相似。请阅读我上面的问题并查看两个演示

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

好的，我在这里稍微编辑了一下，重新排序div，以便排序工作。基本上，有两个步骤:

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

遍历所有列表元素，查看它们在页面上的位置，并将它们的位置分配给一个属性(这里也可以使用.data()，但在dom中不太可见)。在此过程中，我们还删除了'float'并将位置设置为相对位置。

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

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

如果你的可拖拽项会扩展到多行，重新排序的方法就像这里一样，基本上它会在顶部和左侧进行排序。

$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 );
相关文章：