Discussion :

[Shr3ck]

Bonjour tout le monde.

J'essaie de réaliser un DnD permettant de déplacer un ou plusieurs Div en fonction de ce que souhaite l'utilisateur.
J'affiche dans un div "mydraggable" un liste de div que l'utilisateur peut envoyer vers un second div "mydropzone". Actuellement le DnD ne fonctionne qu'avec 1 seul div à la fois et les utilisateurs souhaitent pouvoir en sélectionner plusieurs via Ctrl + clic (et si possible Shift + clic). Le problème est que je ne trouve pas de solution pour réaliser cela.

De ce fait, je cherche une solution à ce problème (de préférence html5/js).

Exemple :

Code html :

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
 
       <div id="mydraggable" class="mainlisteDIV">
 
          <div id="div1" ondragstart="drag(event)" ondragend="dragEnd(event)" class="divDrag" draggable=true>
               <div class="elementDiv">
		    <h2>DIV 1</h2>
	    	    <div class="myDIV">
	    		<div class="remove"></div>
	    	    </div>
		</div>
	   </div>
 
           <div id="div1" ondragstart="drag(event)" ondragend="dragEnd(event)" class="divDrag" draggable=true>
               <div class="elementDiv">
		    <h2>DIV 1</h2>
	    	    <div class="myDIV">
	    		<div class="remove"></div>
	    	    </div>
		</div>
	   </div>
 
	</div>
 
	<div class="separator"></div>
 
 
	<div ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragleave(event)" 
		ondragover="allowDrop(event)" id="dropzone" class="listeDIV">
	</div>

Code js :

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
 
function drag(event){    
 
    var html = event.dataTransfer.getData("text/html");
    if("" == html)
	{
	    event.dataTransfer.setData("text/plain", "<div id=\""+event.target.id+"\" class=\"droppedElement\" onclick=\"remove(this)\">" +
	               event.target.innerHTML + "</div>");
	    actualId = event.target.id;
	}    
}
 
function dragEnd(event){
    /*
     * Si l'élément a été laché sur la zone on le supprime sinon
     * On lui rend sa couleur d'origine
     */
	if(dnd_successful)
		event.target.parentNode.removeChild(event.target);
 
	dnd_successful = false;
}
 
function dragEnter(event){
    /*
     * On survole notre dépôt, je colore le dépôt en gris clair pour indiquer à
     * l'utilisateur qu'il peut lâcher ici.
     */
 
	if(event.target.innerHTML != ""){
    event.target.style.background = "#CCCCCC";
    event.dataTransfer.dropEffect = "move";
    event.preventDefault();
	}
}
 
function dragleave(event){
    /* L'utilisateur quitte le dépôt, on repasse sur un fond blanc. */
    event.target.style.background = old_background;
}
 
function allowDrop(event){
    event.preventDefault(); 
    return false; 
}
 
function drop(event){
 
    var dest = document.getElementById("dropzone");
 
    var html = event.dataTransfer.getData("text/html");
    if("" != html)
	{
    	      dest.style.background = "white";
	}
	else
	{
	// on valide le déplacement est ajoute l'élément dans la dropzone
	    var span = document.createElement("span");
	    span.innerHTML = event.dataTransfer.getData("text/plain");
	    dest.appendChild(span);
	    event.target.style.background = old_background;
		dnd_successful = true;
	}
 
	event.preventDefault(); 
}

[Watilin]

Hmm, ça ne me paraît pas impossible, mais il va falloir ruser… As-tu déjà commencé à mettre en place un mécanisme de sélection multiple des divs ?

Pour faire ça je pense à un conteneur transparent. Quand un div est marqué comme sélectionné (par exemple avec une classe .selected), tu l'ajoutes au conteneur, en faisant attention que visuellement ça ne change rien (il faudra peut-être utiliser le positionnement absolu et/ou clôner le div sélectionné).

Ensuite, quand l'utilisateur commence le DnD, ce n'est pas la div cliquée qui est déplacée, mais le conteneur transparent tout entier. Pour ça il faudra que tu déplaces les attributs draggable et peut-être aussi les ondragstart, ondragend, etc. Si les divs sont bien positionnées dans le conteneur, l'utilisateur verra toutes les divs sélectionnées se déplacer en même temps.