Echange de lignes avec DRAG and DROP

Version imprimable

Bonjour,

J'aimerais utiliser la fonction de drag and drop à l'intérieur d'un tableau HTML.

Voici mon tableau:
Code:

1 2 3 4 5 6 7 8 9 10 11 <table id="myTable"> <tr id="1" draggable="true" ondragstart="return dragStart(event)" ondragenter="return dragEnter(event)" ondragover="return dragOver(event)" ondrop="return dragDrop(event)"> <td>Jean-Michel</td><td>Bernard</td> </tr> <tr id="2" draggable="true" ondragstart="return dragStart(event)" ondragenter="return dragEnter(event)" ondragover="return dragOver(event)" ondrop="return dragDrop(event)"> <td>Micheline</td><td>Bernardette</td> </tr> <tr id="3" draggable="true" ondragstart="return dragStart(event)" ondragenter="return dragEnter(event)" ondragover="return dragOver(event)" ondrop="return dragDrop(event)"> <td>Basile</td><td>Ernest</td> </tr> </table>
Je voudrais pouvoir échanger les lignes 1 et 2 par exemple.
J'ai vu pléthore d'exemples sur internet mais qui échangeaient seulement les textes, et non véritablement les éléments ligne (TR) ainsi que leurs colonnes (TD).
Pouvez-vous m'indiquer ce que je dois mettre dans ma fonction dragDrop? Merci.

27/03/2014, 19h55
NoSmoking

Bonjour,

Citation:

Pouvez-vous m'indiquer ce que je dois mettre dans ma fonction dragDrop?

tu pourrais nous dire ce qu'il y a dans les autres fonctions.

Pourquoi ne pas faire comme les autres sur base de DIVs ou de LIs ?
28/03/2014, 09h18
Isiker
Les autres fonctions sont surtout les fonctions de base du drag and drop où je vais éventuellement insérer une image une fois le drag commencé.
Voici quand même le contenu pour le moment de ma fonction startDrag:
Code:

1 2 3 4 5 function dragStart(ev) { ev.dataTransfer.effectAllowed='move'; ev.dataTransfer.setData("Text", ev.target.id); return true; }
Sinon, j'utilise un tableau HTML car je manipule des données que je peux trier etc... (il faut savoir que le tableau que j'ai mis est un tableau exemple)
Je pense vraiment que l'utilisation d'un table dans mon cas est appropriée.
02/04/2014, 22h20
NoSmoking

Pour ce qui concerne ta fonction dropStart c'est un bon début. ;)

Concernant la fonction dropDrop, cette fonction doit être mise sur le réceptacle en l’occurrence ta TABLE, c'est elle qu'il va falloir réorganiser, il te faudra donc
- récupérer la position de la souris par rapport à la TABLE
- récupérer l'élément en cours de drag
- rechercher entre quels éléments il faut le placer
- déplacer cet élément au bon endroit.

Voilà pour le principe.

J'ai finalement utilisé la méthode suivante pour échanger deux lignes d'un tableau: (à appeler depuis la fonction dragDrop)

Code:

1
2
3
4
5
6
7
8
function swapNodes(a, b){
	var pa1= a.parentNode, pa2= b.parentNode, sib= b.nextSibling;
	if(sib=== a) sib= sib.nextSibling;
	pa1.replaceChild(b, a);
	if(sib) pa2.insertBefore(a, sib);
	else pa2.appendChild(a);
	return true;
}

Et pour l'appel à la fonction:

Code:

1
2
3
4
5
6
7
function dragDrop(ev) {
    ev.preventDefault();
    var TRStart = document.getElementById(ev.dataTransfer.getData("text"));
    var TRDrop = document.getElementById(ev.currentTarget.id);
    swapNodes(TRStart,TRDrop);
    return true;
}

Merci pour l'aide