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

Question

这里的各位专家大家好我的问题都是关于jquery的。我正在使用 draggable dropabble 方法。我有一个 droppable div(parent) 。当将一个元素(它本身就是一个 div)拖放到可放置 div(父 div)的左侧时，元素会附加到左侧...如果放置在靠近右侧的位置，则会附加到右侧。

为此，我使用左右定位(例如:左:30px，右:40px)。我也使用了左浮动。

到目前为止，一切正常。

现在我也想实现排序...我的意思是可放置容器(父 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 位置..或浮点值....

我希望能够展示完整的演示，但我不能。不过我已经做了一个小演示。先看这个This这里你不能将第 3 项与其他项一起排序。现在看这个。 Click在这里它可以工作，但第一次尝试时它只是重新排列，之后它就完美工作了。与我的问题类似。请阅读我上面的问题并查看两个演示

请告诉我是否有人知道解决方案。

Answer 1

好的，所以我编辑了你的 fiddle这里需要对 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进行排序，如图here在另一个问题中。这使得您可以从一开始就像平常一样使用 sortable 。 (在您的应用程序中，您需要将其放入一个函数中，并在每次放入 div 时调用它)

以防万一您的可拖动元素会延伸到多行，重新排序的方法如 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 );