Déplacer plusieurs div lors d'un Drag and Drop

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:

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:

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(); 
}