Comment puis-je faire glisser et déposer pour une table générée dynamiquement par AJAX

Question

Donc j'utilise le plugin TableDnD pour glisser-déposer. Les lignes ne font que glisser, mais quand je veux faire glisser et déposer des lignes d'une table générée dynamiquement par AJAX, le code ne semble pas fonctionner. Quelqu'un peut-il expliquer comment je peux faire ce travail pour une table générée dynamiquement?

$(document).ready(function() { 
     // Drag and drop 
     $("#table-1").tableDnD({ 
      onDragClass: "myDragClass", 
      onDrop: function (table, row) { 
       var rows = table.tBodies[0].rows; 
       for (var i = 0; i < rows.length; i++) { 
        debugStr += rows[i].id + " "; 
        alert(rows[i].id); 
       } 
      }, 
      onDragStart: function (table, row) {} 
     }); 
    }); 

Answer 1

Votre problème peut être dû au fait que vous appliquez .tableDnD()après DOM a été chargé . Si vous ajoutez dynamiquement vos éléments après le chargement du DOM, cela ne s'appliquera pas à ces éléments.

Vous pouvez détecter les changements dans les DOM et appliquer .tableDnD() puis:

$(document).bind('DOMNodeInserted', function(){ 

    $("#table-1").tableDnD({ 
     onDragClass: "myDragClass", 
     onDrop: function (table, row) { 
      var rows = table.tBodies[0].rows; 
      for (var i = 0; i < rows.length; i++) { 
       debugStr += rows[i].id + " "; 
       alert(rows[i].id); 
      } 
     }, 
     onDragStart: function (table, row) {} 
    }); 

}); 

Ou encore mieux:

$(document).ready({ 

    applyDnD(); 
    $(document).bind('DOMNodeInserted', applyDnD); 

    function applyDnD() { 
     $("#table-1").tableDnD({ 
      onDragClass: "myDragClass", 
      onDrop: function (table, row) { 
       var rows = table.tBodies[0].rows; 
       for (var i = 0; i < rows.length; i++) { 
        debugStr += rows[i].id + " "; 
        alert(rows[i].id); 
       } 
      }, 
      onDragStart: function (table, row) {} 
     }); 
    }; 

});