Drag & Drop - évènements sur la dropzone non détectés
Bonjour à tous,
J'essaye de coder un petit code qui me permette de prendre une image, la déplacer et si je rentre dans une zone de drop, l'image vient s'ajuster automatiquement dans la zone de drop.
La fonction drag marche bien mais malheureusement je n'arrive pas à réaliser le drop.
Voici le code :
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
| <style type="text/css">
.draggableBox {
position: absolute;
width: 80px; height: 32px;
padding-top: 10px;
cursor: move;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.zoom {
position: absolute;
margin-left: 980px;
margin-top: 330px;
border: 2px solid black;
width: 360px;
height: 300px;
padding-top: 10px;
color: #CCC;
}
#prenom {
position: absolute;
top: 15px;
right: 20px;
font-family: impact;
text-align: right;
}
#dragphoto {
position: absolute;
top: 0px;
font-family: impact;
line-height: 6px;
font-size: 14px;
margin-left: 100px;
}
.dropzone {
top:200px;
background: #FFF;
border: 1px solid #CCC;
min-height: 50px;
padding: 0;
margin: 0;
position: relative;
width:30%;
text-align: center;
vertical-align: middle;
}
</style>
<div id="dragzone3" class="dropzone"></div>
<div id="52" class="draggableBox" draggable="true" style="background: url(Mini/52.jpg)"></div>
<div id="51" class="draggableBox" draggable="true" style="background: url(Mini/51.jpg)"></div>
<script src="FamilleRichard_test.js"></script> |
Et la partie Javascript :
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
| (function() { // On utilise une IIFE pour ne pas polluer l'espace global
var storage = {}; // Contient l'objet de la div en cours de déplacement
function init() { // La fonction d'initialisation
var elements = document.getElementsByTagName('div'),
elementsLength = elements.length;
for (var i = 0 ; i < elementsLength ; i++) {
if (elements[i].className === 'draggableBox') {
elements[i].addEventListener('mousedown', function(e) { // Initialise le drag & drop
storage.target = e.target;
storage.offsetX = e.clientX - storage.target.offsetLeft;
storage.offsetY = e.clientY - storage.target.offsetTop;
document.addEventListener('mousemove', mouseMoved, false);
}, false);
elements[i].addEventListener('mouseup', function() { // Termine le drag & drop
document.removeEventListener('mousemove', mouseMoved, false);
storage = {};
}, false);
// autres fonctions sur elements[i]
} else if (elements[i].className === 'dropzone') {
elements[i].addEventListener('drop', function(e) {
e.preventDefault(); // Annule l'interdiction de drop
e.target.style.border = "2px solid #000000";
}, false);
elements[i].addEventListener("dragover", function(e) {
e.preventDefault();
// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
e.target.style.border = "2px solid #cccccc";
}, false);
elements[i].addEventListener("dragleave", function(e) {
// Enlève la surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
e.target.style.border = "";
}, false);
}
}
function mouseMoved(e){
e.preventDefault();
var target = storage.target;
if (target) {
target.style.top = e.clientY - storage.offsetY + 'px';
target.style.left = e.clientX - storage.offsetX + 'px';
}
}
}
init(); // On initialise le code avec notre fonction toute prête.
})(); |
En particulier, si j'enlève la ligne e.preventDefault() dans la fonction mouseMoved, mes évènements sur la dropzone sont détectés mais plus mon évènement MouseUp, et inversément...
Quelqu'un a déjà rencontré ce problème ?
Merci par avance !
Camille
