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 : 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
    <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 : 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
(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