Drag & Drop <td>

**Teebus** · 11/05/2016, 16h28

Bonjour, je souhaite dans un <table> pouvoir switcher des cellules, c'est à dire quand je déplace une cellule sur une autre, elles échangent de place.

J'ai beau chercher une solution je ne trouve pas,

j'ai d'abord tenter le coup avec sortable mais je ne parviens pas à switcher les cellules d'une <tr> à une autre.

Avec le Drag & Drop je n'y arrive pas non plus.

J'ai testé pas mal de trucs je ne vais donc pas en énoncer la liste mais plutôt que de me perdre dans des reflexions pour au final surement compliquer le problème j'aimerai bien savoir si il y avait une solution optimale pour effectuer ceci.

En effet je suis ultra novice en JQuery et en Javascript en général.

Quelqu'un aurait un début de solution ?

Merci

**SpaceFrog** · 11/05/2016, 17h01

http://jsfiddle.net/jTnht/189/

**Teebus** · 12/05/2016, 14h46

Bonjour, merci pour ta réponse, cependant j'avais déjà essayé cette solution mais de cette façon on ne peut pas switcher les cellules d'une ligne à l'autre.

j'ai d'abord tenter le coup avec sortable mais je ne parviens pas à switcher les cellules d'une <tr> à une autre.

Y'aurait-il un moyen ?

Merci

**SpaceFrog** · 12/05/2016, 15h54

switcher != déplacer

**Teebus** · 13/05/2016, 09h01

Et alors ?

**SpaceFrog** · 13/05/2016, 09h04

Cela veux dire que la cellule de destination doit prendre la place de la cellule source ...
Il va donc te falloir surcharger le onstart pour 1 stocker la position de la cellule source, puis le ondrop pour 2 remplacer la destination par la source, 3 remplacer la source par la destination ...

**danielhagnoul** · 13/05/2016, 11h52

UI Sortable

Dans le TBODY d'une TABLE on peut trier les TR :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    th, td {
      position: relative;
      margin: 6px;
      padding: 3px;
      width: 100px;
      height: 100px;
      text-align: center;
      border: 1px dotted grey;
    }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( "#sortable" ).sortable(); // TR sortable
 
    });
  </script>
</head>
<body>
 
  <table>
    <thead>
      <tr>
        <th>Un</th>
        <th>Deux</th>
        <th>Trois</th>
      </tr>
    </thead>
    <tbody id="sortable">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>1000</td>
        <td>2000</td>
        <td>3000</td>
      </tr>
    </tbody>
  </table>
 
</body>
</html>

Dans le TBODY d'une TABLE on peut trier les TD à l'intérieur d'un TR :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    th, td {
      position: relative;
      margin: 6px;
      padding: 3px;
      width: 100px;
      height: 100px;
      text-align: center;
      border: 1px dotted grey;
    }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( "#sortable > tr" ).sortable(); // TD sortable à l'intérieur d'un TR
 
    });
  </script>
</head>
<body>
 
  <table>
    <thead>
      <tr>
        <th>Un</th>
        <th>Deux</th>
        <th>Trois</th>
      </tr>
    </thead>
    <tbody id="sortable">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>1000</td>
        <td>2000</td>
        <td>3000</td>
      </tr>
    </tbody>
  </table>
 
</body>
</html>

Mais il est impossible de déplacer un TD d'un TR à un autre. C'est logique, l'intégrité de la TABLE serait compromise.

**SpaceFrog** · 13/05/2016, 13h47

Daniel, je suis d'accord si tu parle de draggable ou sortable avec containment

Mais avec draggable surchargé ça se fait ...

Drag & Drop <td>

jQuery

Discussions similaires

Partager

Partager