Éléments de la table glissante jQuery

La fonctionnalité draggable de jQuery ne semble pas fonctionner sur les tables (en FF3 ou Safari). Il est un peu difficile d'imaginer comment cela fonctionnera, donc ce n'est pas vraiment surprenant que ce ne soit pas le cas.Éléments de la table glissante jQuery

<html> 
    <style type='text/css'> 
    div.table { display: table; } 
    div.row { display: table-row; } 
    div.cell { display: table-cell; } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script> 
    <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $(".row").draggable(); 
    }); 
    </script> 
    <body> 
    <div class='table'> 
     <div class='row'> 
     <div class='cell'>Foo</div> 
     <div class='cell'>Bar</div> 
     </div> 
     <div class='row'> 
     <div class='cell'>Spam</div> 
     <div class='cell'>Eggs</div> 
     </div> 
    </div> 
    <table> 
     <tr class'row'><td>Foo</td><td>Bar</td></tr> 
     <tr class='row'><td>Spam</td><td>Eggs</td></tr> 
    </table> 
    </body> 
</html>

Je me demandais a) s'il y a une raison précise pour laquelle cela ne fonctionne pas (d'un w3c/HTML perspective de spécifications) et b) ce que la bonne façon de s'y prendre pour obtenir des lignes de table draggable est. J'aime les vraies tables en raison de l'algorithme d'effondrement des bordures et de hauteur de ligne - toute alternative qui peut faire ces choses fonctionnerait bien.

Source

2008-11-21 cdleary

Avez-vous un espace supplémentaire dans chacun de vos sélecteurs? Il ne devrait pas y avoir d'espace après chaque "div" et avant le point. Par exemple, votre premier sélecteur correspond à des éléments avec class = "table" à l'intérieur d'un div ... – Prestaul

Correction, merci, mais cela n'a pas fait de différence. :( – cdleary

Si vous avez vraiment des données tabulaires, vous devriez en effet rester fidèle à la table.

Et si vous voulez faire glisser les lignes au sein une table, ce JQuery + "draggable row table" library fonctionne parfaitement dans FireFox3

Source

2008-11-21 05:08:32 VonC

Oups - fixé l'emplacement de la table – cdleary

bonne astuce! ..... – jlarson

ne sais pas si intentionnelle, mais votre réponse totalement rimée :) –

Il y a une façon de faire des lignes de table avec JQuery UI draggable aussi. Tout ce que vous devez faire est de définir l'option d'aide à une fonction renvoyant une nouvelle div avec une table à l'intérieur qui accueillera la ligne que vous traînez comme:

helper: function(event){ 
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end(); 
},

Thx à David Petersen pour le conseil: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

Source

2010-02-09 19:25:45

bonne technique! lorsque vous utilisez ceci, n'oubliez pas que tout callback 'drop 'sur vos éléments' $ .droppable() 'peut toujours faire référence à la propriété' ui.draggable' afin de cibler l'élément row d'origine. donc vous n'avez pas besoin de sacrifier aucune fonctionnalité en utilisant une aide légèrement funky (espoir qui a du sens) –

Y at-il une bonne méthode qui ne clone pas l'élément? Maintenant, il montre à la fois la ligne table originale et clonée, étant un peu déroutant pour l'utilisateur – Andrei

Je ne sais pas si c'est possible, mais qu'en est-il d'ajouter une classe CSS à la ligne source et gris ou quelque chose pendant que vous faites glisser? –

On peut également définir css tr.ui-draggable-dragging {display: block} - de cette façon on peut faire glisser les lignes, cependant, leurs coordonnées sont mal calculées. Je n'ai pas encore trouvé une bonne solution pour ce problème.

Source

2012-01-20 12:57:47 Andrei

Juste au cas où quelqu'un fait la même erreur que je l'ai fait:

Si vous voulez être en mesure de modifier l'ordre à l'intérieur d'une table TRs en les faisant glisser, .sortable est ce que vous avez besoin plutôt que .draggable

Juste moi?

Source

2012-04-18 13:07:06

Fait ma journée. Ty. – OrangeTux

Pas seulement vous :-) –

J'ai fait ce travail en utilisant jQueryUI ce qui suit:

$(function() { 
 
    $(".sortable").sortable({ 
 
    revert: true 
 
    }); 
 
});

table td { 
 
    border: solid 1px black; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<table> 
 
    <tbody class="sortable"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>One</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Two</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Three</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>Four</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>Five</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>6</td> 
 
     <td>Six</td> 
 
     <td>some text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Source

2012-08-23 13:12:31 sevmusic

merci mon pote !! –

C'est un peu en retard, mais aujourd'hui, je trouve html5 drag'n drop API fonctionne très bien avec l'élément <tr>. Tout ce que vous devez faire est de permettre <tr draggable="true"> et d'enregistrer les événements

dragstart 
drag 
dragenter 
dragleave 
dragover 
drop 
dragend

J'ai trouvé cet article très utile http://www.html5rocks.com/en/tutorials/dnd/basics/

!! Sachez qu'il ya une faille dans cette API html5 que l'événement sera tiré lorsque vous survolez les éléments enfants même si vous n'êtes intéressé que par l'élément parent. J'espère que les gens html5rocks le répareront bientôt.

Source

2013-05-06 00:32:53 Rn2dy

Éléments de la table glissante jQuery

Répondre

Questions connexes