Drag & Drop <td>

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

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

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.

Citation:

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

switcher != déplacer

Et alors ?

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 ...

UI Sortable

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

Code:

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:

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.

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

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