Bir jQuery sortable öğesindeki tüm öğelerin konumlarını takip edin

Question

jQuery öğesindeki öğelerin nasıl sıralanabileceğini nasıl izleyebileceğimi anlamaya çalışıyorum. Diyelim ki, her tablonun kendine özgü bir kimliği olan dört elementim (div) var. Onları # 100, # 200, # 300 ve # 400 olarak adlandıralım ve başlayacak şekilde sırayla sunulacak. Ama numara 3'ü söyleyebilmek için # 100'ü hareket ettirdiğimde, bu id için yeni pozisyonu kaydedebilmem gerekir, ancak diğerlerinin güncellenmiş konum değerlerini de almasını sağlamalıyım.

Herhangi bir anlam ifade ediyor muyum? Temel olarak, her benzersiz kimliğin pozisyonlarını almak istiyorum, bu yüzden daha sonra kullanmak için listenin sırasını kaydedebilirim.

Sadece taşındı biri .. doğru yönde

Nokta bana, bir sıralanabilir tüm öğelerin raporlar şey bulmak mümkün olmamıştır? Teşekkürler

Answer 1

Öğeleri takip etmek için size verilen durma olayını sortable'da kullanabilirsiniz. Bu küçük bir örnektir;

(function($) { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
      console.log($.map($(this).find('li'), function(el) { 
       return el.id + ' = ' + $(el).index(); 
      })); 
     } 
    }); 
})(jQuery); 

Bu, sortable'daki tüm öğelerin kimlikleri ve geçerli dizinleriyle birlikte bir günlüğünü günlüğe kaydeder. Ben yerleşik bir yöntem toArray kullanmak önermek dokümanlar http://api.jqueryui.com/sortable/#method-toArray göre http://jsfiddle.net/beyondsanity/HgDZ9/

Answer 2

jQuery UI Sortable Position'un olası kopyası.

Temel olarak bir sıralanabilir (ya da sadece bir düz eski ebeveyn Elemen) içindeki bir elemanın konumunu, hiçbir şey taşındı eğer bu kod 2 dönecektir

$('#300').index(); 

gibi sadece bir şey (index() başlar sayma almak için sıfırda) ve elemanlar yeniden düzenlendiğinde güncellenir.

İşte bir demo: http://jsfiddle.net/XB5Dh/. Konumunu görmek için bir öğeye tıklayabilir ve bir öğeyi sürüklediğinizde yeni konum gösterilir.

Answer 3

: Burada

çalışan bir yanı jsfiddle üzerinde örnektir. Örnek:

$(document).ready(function() { 
    $('#sortable').sortable({ 
     stop: function(e, ui) { 
     console.log($('#sortable').sortable('toArray')); 
     } 
    }); 
    $('#sortable').disableSelection(); 
    });