Javascript Girl
  1. Javascript Girl
  3. Table déroulante – déplacer des cellules vers différentes colonnes
Intereting Posts
JQuery Mind map / Think Map Ajouter un marqueur de style CSS à Google Maps Différence entre le type de chaîne javascript et l'objet String? Chargement d'une image sur un <img> de <fichier d'entrée> Comment voir les erreurs JavaScript de l'application PhoneGap dans Xcode? Signature Amazon S3 ne correspond pas – AWS SDK Java Empêcher l'édition d'une cellule d'une ligne modifiable spécifique en mode d'édition en ligne Utilisation du serveur SignalR à partir du code Python Diviser une chaîne (qui contient des balises) par des espaces sans briser les balises ou étiqueter html interne en Javascript Navigation dans DOM avec Extjs Comment modifier toutes les couleurs de texte de paragraphe et la taille dynamiquement onclic dans un <div>? Désactiver enter submit Problème avec des étiquettes de données et Bootstrap réactives Comment lire les données dans le script Python appelé à partir de javascript Post Comment puis-je charger une page Web dans un div en utilisant Javascript sans IFRAME et JQuery?

Table déroulante – déplacer des cellules vers différentes colonnes

Je tente de faire une table de glisser-déposer. Je modélisais mon code après une démo JQuery sur son site, mais je ne peux pas faire en sorte que le mien fonctionne. Je ne sais pas non plus si ce que je fais est la meilleure option pour moi.

Je souhaite déplacer les cellules de table d'une colonne à l'autre. Est-ce qu'il me manque quelque chose avec mon code ou existe-t-il une meilleure solution pour cela? 

<script> $(function() { $( "#paid, #partially_paid, #owes" ).sortable({ connectWith: ".tdPayment" }).disableSelection(); }); </script>

Table 

 <table class="paymentTable" id="dragTable"> <tr> <th class="thPayment">Paid</th> <th class="thPayment">Partially Paid</th> <th class="thPayment">Owes</th> </tr> <tr> <td class="tdPayment" id="paid"> <?php if ($paid_name == true) { echo $paid_name; } else { echo "No one has paid"; } ?> </td> <td class="tdPayment" id="partially_paid"> <?php if ($partially_paid__name == true) { echo $partially_paid__name . " - " . $partially_paid_amount; } else { echo "No one has made a partial payment"; } ?> </td> <td class="tdPayment" id="owes"> <?php if ($owes_name == true) { echo $owes_name; } else { echo "Everyone has paid something"; } ?> </td> </tr> </table>

MISE À JOUR AVEC ADDITION EN DIV 

 <table class="paymentTable" id="dragTable"> <tr> <th class="thPayment">Paid</th> <th class="thPayment">Partially Paid</th> <th class="thPayment">Owes</th> </tr> <tr> <td class="tdPayment" id="paid"> <div> <?php if ($paid_name == true) { echo $paid_name; } else { echo "No one has paid"; } ?> </div> </td> <td class="tdPayment" id="partially_paid"> <div> <?php if ($partially_paid__name == true) { echo $partially_paid__name . " - " . $partially_paid_amount; } else { echo "No one has made a partial payment"; } ?> </div> </td> <td class="tdPayment" id="owes"> <div> <?php if ($owes_name == true) { echo $owes_name; } else { echo "Everyone has paid something"; } ?> </div> </td> </tr> </table>

Lorsque vous utilisez $("#paid, #partially_paid, #owes" ).sortable({ vous faites que l'élément enfant est sortable, le résultat est donc de rendre les éléments dans chaque td sortable et peut être entraîné vers chacun D'autre part, comme si vous autorisez td à être déplacé sur une autre colonne, vous devrez peut-être calculer le nombre de td s dans chaque colonne et ajouter quelque chose comme rowspan pour que la table ne semble pas stange (également, vous pourriez vouloir aussi être traîné ), Que diriez-vous de créer des div dans votre Td, et faites-le glisser simplement la div vers une autre colonne? 

 $(function() { $( "#paid, #partially_paid, #owes" ).sortable({ connectWith: ".tdPayment", remove: function(e, ui) { var $this = $(this); var childs = $this.find('div'); if (childs.length === 0) { $this.text("Nothing"); } }, receive: function(e, ui) { $(this).contents().filter(function() { return this.nodeType == 3; //Node.TEXT_NODE }).remove(); }, }).disableSelection(); }); 
 table { border : solid 1px #000; } th, td { width: 100px; margin: 0px auto; } div { background-color: #0cc; margin: 1px auto; width: 50px; height: 30px; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <table class="paymentTable" id="dragTable"> <tr> <th class="thPayment">Paid</th> <th class="thPayment">Partially Paid</th> <th class="thPayment">Owes</th> </tr> <tr> <td class="tdPayment" id="paid"> <div > A </div> <div> B </div> <div> C </div> </td> <td class="tdPayment" id="partially_paid"> <div> D </div> <div> E </div> <div> F </div> </td> <td class="tdPayment" id="owes"> <div> G </div> <div> H </div> <div> I </div> </td> </tr> </table>