如何檢索按位置排序的元素，而不是在jQuery中的DOM順序

Question

我正在使用jQuery的Draggable重新排列某些DOM元素。現在我想檢索由當前位置排序的元素，而不是DOM順序。

當前，jQuery選擇以DOM順序返回元素。

如何檢索使用jQuery按當前位置排序的元素？

Answer 1

如果你想在頁面上的物理位置，你將不得不編寫一個自定義函數返回頁面上的x，y座標。

我會建議通過它們的y座標（距離頁面頂部的距離）獲取所有項目，然後按x座標排序，如果它們從頂部具有相同的位置。

.offset()是最好的。

將所有的dom元素添加到一個數組，然後按照上面的位置進行排序。

注意 - 這將是很多繁重的jQuery - 裸心 - 如果某些元素是您想要重新排序的元素，我會建議手動分配id並運行任何邏輯規定它們的佈局代替。

Answer 2

我已經爲元素的垂直順序創建了一個函數。您也可以通過檢查元素的左側屬性來使其水平。

試試這個

$(function() { 
    function SortByTop(a, b){ 
     var top1 = a.top; 
     var top2 = b.top; 
     return ((top1 < top2) ? -1 : ((top1 > top2) ? 1 : 0)); 
    } 

    var order = []; 
    $(".draggable").draggable({ 
     stop: function(event,ui){ 
      var dr = $('.draggable'); 
      order=[]; 
      dr.each(function(ind,val){ 
       var obj = $(this).position(); 
       obj.id = $(this).attr('id'); 
       order.push(obj); 
      }); 
      order.sort(SortByTop); 
      for(var i=0;i<order.length;i++){ 
       console.log(order[i].id) 
      } 

     } 
    }); 
    }); 

觀看演示here