web-dev-qa-db-fra.com

eléments de table déplaçables jQuery

la fonctionnalité draggable de jQuery ne semble pas fonctionner sur les tables (dans FF3 ou Safari). Il est un peu difficile d’envisager le fonctionnement de ce (serait} _, ce qui n’est donc pas vraiment surprenant.

<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 spécifique pour laquelle cela ne fonctionne pas (du point de vue des spécifications W3c/HTML) et b) quelle est la bonne façon d'obtenir des lignes de tableau déplaçables.

J'aime les vraies tables en raison de l'algorithme de réduction des bordures et de hauteur de ligne - toute alternative capable de faire ces choses fonctionnerait bien.

jquerycssdrag-and-drophtml-table
28
cdleary

Si vous avez vraiment des données tabulaires, vous devriez vous en tenir à tableau.

Et si vous voulez faire glisser des lignes dans une table, cette bibliothèque JQuery + "table de lignes déplaçables" fonctionne parfaitement dans FireFox3.

22
VonC

Il existe un moyen de rendre les lignes de tableau déplaçables avec JQuery UI aussi . Tout ce que vous avez à faire est de définir l'option helper sur une fonction renvoyant un nouveau div avec une table à l'intérieur qui hébergera la ligne que vous faites glisser comme ceci:

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

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

34
Ariel Popovsky

Juste au cas où quelqu'un ferait la même erreur que moi: 

Si vous voulez pouvoir réorganiser les TR dans une table en les faisant glisser, c'est à.

Juste moi?

11
Enigma Plus

C’est un peu tard, mais aujourd’hui, j’ai trouvé html5 drag'n drop API fonctionne bien avec l’élément <tr>. Tout ce que vous avez à faire est de l'activer <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 que cette API html5 présente un défaut: l'événement sera déclenché lorsque vous passez le curseur de la souris sur les éléments enfants, même si l'élément parent vous intéresse uniquement. J'espère que les gens de html5rocks le répareront bientôt.

3
Rn2dy

J'ai réalisé ce travail en utilisant JqueryUI avec les éléments suivants:

$(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>

1
sevmusic

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

0
Andrei