IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Echange de lignes avec DRAG and DROP [API HTML5]


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    70
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 70
    Par défaut Echange de lignes avec DRAG and DROP
    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 205
    Par défaut
    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 ?

  3. #3
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    70
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 70
    Par défaut
    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.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 205
    Par défaut
    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.

  5. #5
    Membre confirmé
    Inscrit en
    Juin 2008
    Messages
    70
    Détails du profil
    Informations forums :
    Inscription : Juin 2008
    Messages : 70
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème avec Drag and Drop WPF
    Par Moh1267 dans le forum C#
    Réponses: 2
    Dernier message: 04/06/2014, 11h35
  2. listbox avec drag and drop
    Par bender86 dans le forum Général Dotnet
    Réponses: 4
    Dernier message: 15/01/2014, 15h55
  3. problème avec drag and drop
    Par Nayra dans le forum Agents de placement/Fenêtres
    Réponses: 1
    Dernier message: 16/04/2009, 00h11
  4. Réponses: 1
    Dernier message: 29/04/2006, 16h55
  5. "Drag and drop" avec directinput
    Par batosai dans le forum DirectX
    Réponses: 1
    Dernier message: 16/06/2004, 16h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo