Tablo satırlarının sırasını ".toArray()" veya ".serialize()" kullanmadan jQuery sortable kullanarak nasıl kaydedebilirim?

Question

Diyelim ki jquery sortable kullanan bir tablom var. Bir satırın içHTML'sini, sürüklendiğinde başka bir satırın içHTML'si ile değiş tokuş etmek için nasıl alabilirim ve sonra siparişi ".toArray()" veya ".serialize()" kullanmadan kaydedebilirsiniz. Örneğin, innerHTML'i çıkarmak için yukarı ve aşağı düğmelerini kullanarak ".toArray()" veya ".serialize()" kullanmadan siparişi kaydetmeyi başardım.

jQuery(function() { 
    var ids = []; 
    $("tbody#sortable").sortable({ 
     axis: "y", 
     items: ".row_order", 
     forcePlaceholderSize: true, 
     placeholder: "must-have-class", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
      ids.push($(this).attr('id')); 
     }); 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    }   
    }); 
}); 

Bu

Eğer değişkenlere öğelerin html içeriği atıyorsanız ve herhangi bir şekilde DOM öğelerini manipüle değiliz çünkü örnek çalışmayacaktır Fiddle

Answer 1

olduğunu.

iç html güncellemek için, her bir öğenin üzerine .html() arayıp bağımsız değişken olarak html geçmek olurdu:

jQuery(function() { 
    var ids = []; 
    jQuery("#sortable_available").sortable({ 
    items: "li", 
    start: function(event, ui) { 
     //Empty the array to avoid duplication. 
     ids = []; 
     //Store the ids in the array. 
     $.each(event.target.children, function() { 
     ids.push($(this).attr('id')); 
     }) 
    }, 
    update: function(event, ui) { 
     //Store the html in local variables 
     var prevHtml = ui.item.prev().html(); 
     var nextHtml = ui.item.next().html(); 

     //Call .html and pass the html content as an argument 
     ui.item.prev().html(nextHtml); 
     ui.item.next().html(prevHtml); 

     //On an update, loop through the sortable items and reset their items. 
     for (var i = 0; i < event.target.children.length; i++) { 
     $(event.target.children[i]).attr('id', ids[i]); 
     } 
    } 
    }); 
}); 

kimlikleri korumak için daha iyi bir yolu olabilir, ancak Yukarıdakiler, ihtiyaçlarınızın nasıl karşılanabileceğinin kaba bir örneğidir. Canlı bir demo için here'a tıklayın