Essai sur Drag and Drop

**Mathaousse** · 25/03/2016, 17h12

Bonjour,

Tout d'abord autant dire que je suis débutant ce qui peut impliquer des questions absurdes.
Je suis en train de faire un petit programme Drag&Drop pour comprendre le JS et le DOM. Ci-joint le code actuel :

Code :

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

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
	<head> <!-- En -tête de la page -->
		<meta charset ="utf -8"/>
		<link rel="stylesheet" href ="Dragdrop.css"/>
		<title >Titre </title>
	</head>
 
	<body> <!-- Corps de la page -->
 
        <!---Code en attente
        <br >
        <label for=Nombre>Nombre</label>
        <input type="text" name="Nombre" id="Nombre" value="4" />
        <br />-->
 
		<div class ="dropper">
		<h1>A</h1>
 
 
		</div>
 
		<div class ="dropper">
		<h1>B</h1>
		<div class ="draggable"></div>
 
		</div>
 
		<div class ="dropper">
		<h1>C</h1>
			<div class ="draggable"></div>
		</div>
 
 
		<div class ="dropper">
		<h1>D</h1>
			<div class ="draggable"></div>
		</div>
 
 
		<script>
 
           Creation ();
 
          (function() {
 
        var dndHandler = {
 
            draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
 
            applyDragEvents: function(element) {
 
                element.draggable = true;
 
                var dndHandler = this; // Cette variable est nécessaire pour que l'événement "dragstart" ci-dessous accède facilement au namespace "dndHandler"
 
                element.addEventListener('dragstart', function(e) {
                    dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
                    e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
                }, false);
 
            },
 
            applyDropEvents: function(dropper) {
 
                dropper.addEventListener('dragover', function(e) {
                    e.preventDefault(); // On autorise le drop d'éléments
                    this.className = 'dropper drop_hover'; // Et on applique le design adéquat à notre zone de drop quand un élément la survole
                }, false);
 
                dropper.addEventListener('dragleave', function() {
                    this.className = 'dropper'; // On revient au design de base lorsque l'élément quitte la zone de drop
                });
 
                var dndHandler = this; // Cette variable est nécessaire pour que l'événement "drop" ci-dessous accède facilement au namespace "dndHandler"
 
                dropper.addEventListener('drop', function(e) {
 
                    var target = e.target,
                        draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
                        clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
 
 
 
                    while(target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
                        target = target.parentNode;
                    }
 
                    target.className = 'dropper'; // Application du design par défaut
 
                    clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
                    dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
                    draggedElement.parentNode.removeChild(draggedElement);
 
                    //Parti perso du code pour que le drag prenne le nom de la zone de drop.
                    var NomDraggable = clonedElement.innerText.substring(0,2),
                        ajoutA = target.firstChild.nextSibling;
 
                    clonedElement.innerHTML=NomDraggable+ajoutA.innerText; 
 
                });
 
            }
 
        };
 
        var elements = document.querySelectorAll('.draggable'),
            elementsLen = elements.length;
 
        //Parti perso du code
        for(var i = 0 ; i < elementsLen ; i++) {
            elements[i].innerHTML = ("#")+(i+1) //Donne un numéro à chaque carré
            elements[i].innerHTML = elements[i].innerText+elements[i].parentNode.firstChild.nextSibling.innerText; //Donne le nom de la zone pour chaque carré
        }
 
 
 
        for(var i = 0 ; i < elementsLen ; i++) {
            dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux élément déplaçables
        }
 
        var droppers = document.querySelectorAll('.dropper'),
            droppersLen = droppers.length;
 
        for(var i = 0 ; i < droppersLen ; i++) {
            dndHandler.applyDropEvents(droppers[i]); // Application des événements nécessaires aux zones de drop
        }
 
 
    })();    
 
    function Creation() {
        var elements = document.querySelectorAll('.dropper'),
        NewElements = document . createElement("div")
        NewElements.setAttribute("class","draggable")
        Nombre=3;
 
    elements[3].appendChild(NewElements);
    elements[2].appendChild(NewElements);
    //alert (elements[3])
 
    /*for(var i=0 ; i<Nombre ; i++){
        elements[i].appendChild(NewElements);
        alert (i)
    }*/
    };
 
 
 
        </script>
 
	</body>
</html>

Pour être honnête, j'ai allègrement "pomper" la partie D&Drop et je l'ai modifié (je ne dirai pas amélioré bien sûr

). Dans sa version initiale des carrés nommées #1 à #6 sont D&D dans des zones de A à D.
Maintenant les carrés prennent le nom des zones en suffixes. Je voudrais maintenant pouvoir avoir ajouté des "carrés" de manière automatique donc je voulais mettre qq chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 function Creation() {
        var elements = document.querySelectorAll('.dropper'),
        NewElements = document . createElement("div")
        NewElements.setAttribute("class","draggable")
        Nombre=3;
 
    for(var i=0 ; i<Nombre ; i++){
        elements[i].appendChild(NewElements);
}

Mais le problème c'est qu'à chaque boucle il ne garde pas l’élément précédent genre quand i=0 il fait bien un carré en A puis quand i=1 il fait un carré en B mais vire celui en A.... Ce qui fait que je n'ai qu'un carré rajouté en C alors que j'aurai en avoir en A,B et C.

Suis je bien explicite et pouvez vous m'aider?

Merci!

**melka one** · 25/03/2016, 18h40

jour

en fasant comme tu fait tu ne fait que déplacer l’élément

essai de cette facon

Code :

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

1
2
3
4
5
6
7
for(var i=0 ; i<Nombre ; i++){
 
var clone=NewElements.cloneNode(true)
elements[i].appendChild(clone);
 
 
}

**Mathaousse** · 25/03/2016, 19h06

Merci beaucoup cela fait exactement ce que je souhaitais faire.

Essai sur Drag and Drop

JavaScript

Discussions similaires

Partager

Partager