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

Question

嗨，這裏的所有專家 我的問題都是關於jquery的。 我正在使用拖放式可移動 methods.I有一個droppable div（父）。並且將一個元素（這是一個div本身）拖放到droppable div（父div）的左邊，元素會被附加到左邊......如果接近右邊，則它會附加到右邊。

爲此，我使用左右定位（例如：left：30px，right：40px）。我也使用左右浮動。

高興地在這裏它的工作完美。

現在我想實現排序呢...我的意思是可放置容器（父div）內的元素也應該排序。我已經使用ui.sortable 。但它不起作用，因爲DOM元素具有固定的位置，所以它不能排序。

現在我根據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元素。第一次嘗試後，它改變了CSS，它完全排序。 我想先整理的嘗試本身沒有孩子的清理的div

注意：排序不工作，因爲我已經給了DOM positions..or浮點值....

我希望我能表現一個完整的演示，但我不能。不過，我已經做了一個小演示。首先看這個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"}); 
}); 

經歷所有列表元素，看到他們在頁面上，並ASIGN其職務上的屬性（可以使用。數據（）在這裏爲好，但將不那麼明顯在dom中）。在這樣做的同時，我們也刪除'浮動'並將位置設置爲相對。

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

然後我們排序基於此數據屬性的股利，作爲一個不同的問題顯示here。這使得它可以從一開始就像正常一樣使用排序功能。 （在你的應用程序中，你需要把它放在一個函數中，每當你放入一個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);