Discussion :

[Isiker]

Bonjour,

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

Voici mon tableau:

Code html :

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

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.

[NoSmoking]

Bonjour,

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 ?

[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 Javascript :

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

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.

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

[Isiker]

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

Code Javascript :

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

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 Javascript :

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

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