Draggable() ne fonctionne pas dans jquery

Question

Je poste cette question pour une deuxième fois. et je n'ai toujours pas eu de réponse. Il a été comme quatre jours et j'ai été coincé dans ce problème. draggable() ne fonctionne pas dans les tables créées dynamiquement J'ai comparé le DOM de la table créée manuellement et la table dynamique tout est pareil, mais cela fonctionne dans la table créée manuellement et non dans la table dynamique. Cela signifie que manuellement, je peux déplacer les colonnes de la table comme réorganisation et non en dynamique. S'il vous plaît j'ai besoin d'aide pour ça. ci-dessous est mon code.

function addTab() { 
     var tab_title = $tab_title_input.val() || 'Tab '+tab_counter; 
     //alert(tab_title); 
     $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);     

     var newTableDiv = $("<div />",{id: 'dialog'+tab_counter});   
     newTableDiv.appendTo("body");   
     alert("div appended to body"+" "+'dialog'+tab_counter); 
     var setCSS = { 
      'width' : '100%', 
      'cellspacing' : '1px', 
      'cellpadding' : '2px' 
     } 

     var newTable = $('<table class="ui-widget" width="100%" border="0" cellspacing="1" cellpadding="2">'+ 
        '<thead id="myTableHead'+tab_counter+'" class="ui-widget-header" style="display: table-header-group;">'+ 
        '<tr><th><strong>Symbol</strong></th>'+ 
        '<th><strong>Price</strong></th>'+ 
        '<th><strong>Volume</strong></th>'+ 
        '<th><strong>Buy</strong></th>'+ 
        '<th><strong>Sell</strong></th></tr></thead>'+ 
        '<tbody id="sortable'+tab_counter+'" class="ui-widget-content" style="display: table-row-group;">'+ 
'<tr><td>PSO</td><td>100.00</td><td>12</td><td>120.00</td><td>130.00</td></tr>'+ 
'<tr><td>ASO</td><td>200.00</td><td>11</td><td>120.00</td><td>130.00</td></tr></tbody></table>').attr('id', 'myTable'+tab_counter); 
     $(newTableDiv).append(newTable); 

     $('#myTable'+tab_counter).tablesorter(); 
     $('#myTable'+tab_counter).draggable(); //**not working** 

     $('#sortable'+tab_counter).sortable();   

     if ($("#myTable"+tab_counter).length > 0) { 
      alert("id exists"); 
     } 
     alert("#myTable"+tab_counter); 


     var myDiv = $("<div />", { "class":"ui-tabs-panel ui-widget-content ui-corner-bottom",id: 'tabs-'+tab_counter}); 
     myDiv.append("#tabs"); 

     $("#sortable"+tab_counter).show(); 
     $("#myTableHead"+tab_counter).show(); 

     $('#dialog'+tab_counter).prependTo('#tabs-'+tab_counter);   
     tab_counter++; 
     //alert(tab_counter); 
    } 

J'ai besoin d'aide pour cela.

Answer 1

Vous utilisez .draggable qui est une méthode jQuery UI mais il ne fonctionnera pas pour faire glisser les colonnes simplement en les attachant à l'en-tête de la table. Vous devrez ultilise une fonction d'assistance:

Pour dragtable, bien que la documentation dit:

Ajouter class = "draggable" à une table, vous voudrez peut-être modifier l'ordre.

Ceci est un peu simpliste à dire parce que le développeur devrait réaliser que les choses peuvent être créées dynamiquement en Javascript! En d'autres termes, ajouter simplement la classe draggable à la table créée dynamiquement ne fonctionnera pas. En d'autres termes, il suffit simplement d'ajouter la classe draggable. Cela est dû au fait que draggable a déjà ajouté des écouteurs d'événement après l'exécution du init pour toutes les tables lorsque le DOM est prêt. Changer la classe n'ajoutera pas automatiquement un écouteur d'événement. S'il s'agissait d'un plugin jQuery, il pouvait utiliser .live pour attacher des écouteurs d'événement à n'importe quelle table créée dynamiquement maintenant et dans le futur, mais malheureusement ce n'est pas le cas.

Vous devrez joindre une dragtable sur la table nouvellement créée, essayez:

dragtable.makeDraggable(newTable); 

---

Edit:

Assurez-vous que votre action sur l'élément de table elle-même, pas Objet jQuery ie:

dragtable.makeDraggable(newTable[0]); 

Variante:http://jsfiddle.net/garreh/64pyb/