Faire un drag and drop avec échange de position

Bonjour,

Je souhaiterais faire un système de drag and drop dans mon site web, avec échange des positions respectives des deux éléments si un élément est déposé dans une zone où se trouvait déjà un autre éléments.

J'ai fait pas mal de recherche et est essayé pas mal de méthodes différentes (en jQuery comme en JS pur) mais je n'y arrive malheureusement toujours pas. :bug:

Pour l'instant j'arrive bien à déplacer les éléments que je veux déplacer mais soit ils ne se positionnent pas bien, soit ils ne se considèrent pas comme étant dans une zone droppable et retourne à leur emplacement d'origine. :whistle:

Voici mon code HTML :

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
72
73
74
75
76
77
78
79
80
<article class="raccourcis">
    <div class="DnD">
        <table id="table">
            <tr>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="1" href="<?php echo $lien[$id[1]]; ?>" target="_blank">
                            <?php echo $name[1]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="2" href="<?php echo $lien[2]; ?>" target="_blank">
                            <?php echo $name[2]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="3" href="<?php echo $lien[3]; ?>" target="_blank">
                            <?php echo $name[3]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="4" href="<?php echo $lien[4]; ?>" target="_blank">
                            <?php echo $name[4]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="5" href="<?php echo $lien[5]; ?>" target="_blank" ondrop="inversion();">
                            <?php echo $name[5]; ?>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="6" href="<?php echo $lien[6]; ?>" target="_blank">
                            <?php echo $name[6]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="7" href="<?php echo $lien[7]; ?>" target="_blank">
                            <?php echo $name[7]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="8" href="<?php echo $lien[8]; ?>" target="_blank">
                            <?php echo $name[8]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="9" href="<?php echo $lien[9]; ?>" target="_blank">
                            <?php echo $name[9]; ?>
                        </a>
                    </div>
                </td>
                <td class="droptab">
                    <div class="rac">
                        <a class='racc' id="10" href="<?php echo $lien[10]; ?>" target="_blank">
                            <?php echo $name[10]; ?>
                        </a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</article>

(Les données récupérés avec le PHP sont des liens avec leur nom)

Et mon code jQuery :

Code:

1
2
3
4
5
6
7
8
9
$('.rac').draggable({
    containment : '#table',
    cursor : 'move',
    revert : 'invalid'
});
 
$('.rac').droppable({
    accept : '.rac'
});

J'éspère avoir réussi à bien expliquer ce que je voulais faire (les explications sont malheureusement pas vraiment mon fort, désolé :oops: )

Si quelqu'un pouvait m'aider, ce serait vraiment sympa :)

Merci d'avance

PS : je sais que mon code est pas tout à fait optimisé, je compte m'en occuper une fois qu'il sera entièrement fonctionnel ^^

PS bis : désolé pour avoir oublier de préciser le code utilisé dans les balises, je ne savais pas qu'il fallait le faire

EDIT : j'ai finalement trouvé une solution sur un autre site.