Discussion :

[Thooy]

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

[Archimède]

En raisonnant un petit peu, il est possible sans trop se prendre la tête de réaliser un drag and drop :

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
 
<!doctype html>
 
<html lang="en">
    <head>
        <title><!-- Insert your title here --></title>
    </head>
    <body>
        <script>
            var w=window.innerWidth,h=window.innerHeight;
            var permission=false;
            var oldleft=w/100,oldtop=3*h/8; // position initiale du canvas
            var mouseX,mouseY;
 
            // un objet visuel quelconque à déplacer...----------------------------
            var monDessin=window.document.createElement("canvas");
            monDessin.width=w/4;
            monDessin.height=h/4;
 
            monDessin.style.position="absolute";
            monDessin.style.left=w/100+"px";
            monDessin.style.top=3*h/8+"px";
            monDessin.style.cursor= "pointer";
 
            document.body.appendChild(monDessin);
 
            var context=monDessin.getContext("2d");
            context.strokeStyle="#000000";
            context.lineWidth=3;
            context.beginPath();
            context.strokeRect(0,0,w/4,h/4);
            context.moveTo(0,0);
            context.lineTo(w/4,h/4);
            context.moveTo(w/4,0);
            context.lineTo(0,h/4);
            context.stroke();
            //------------------------------------------------
 
            monDessin.addEventListener('mousedown',onmousedown);
            addEventListener('mousemove',onmousemove);
            addEventListener('mouseup',onmouseup);
 
            function onmousedown(e){
                permission=true;
                mouseX=e.clientX;
                mouseY=e.clientY;
            }
 
            function onmousemove(e)
            {
                if (permission)
                {
                    monDessin.style.left=oldleft+e.clientX-mouseX+'px';
                    monDessin.style.top= oldtop+e.clientY-mouseY+'px';
                }
            }
 
 
            function onmouseup()
            {
                    permission=false;
                    oldleft=monDessin.offsetLeft;
                    oldtop=monDessin.offsetTop;  
            }
 
        </script>
 
    </body>
</html>

Après tu veux pouvoir faire un effet d'aimantation dans un objet donné... Il te faut faire une fonction intersectRect qui te renvoie un boolean.
Si le rect de ton objet déplacé croise le rect destination, ta fonction te donne un true et tu redimensionnes ton objet à la taille du rect destination en ajustant de même sa position à celle de la zone d'aimantation....et le tour est joué.

une fonction vite fait trouvée sur google :

Code :

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

1
2
3
4
5
6
7
 
function intersectRect(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

A tester dans le onmousemove...


soit par exemple :

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
 
<!doctype html>
 
<html lang="en">
  <head>
    <title><!-- Insert your title here --></title>
  </head>
  <body>
    <script>
      var w=window.innerWidth,h=window.innerHeight;
      var permission=false;
      var oldleft=w/100,oldtop=3*h/8; // position initiale du canvas
      var mouseX,mouseY;
 
      //La zone d'aimantation  --->un rectangle gris de la même dimension que l'objet à déplacer.
      var canvasdest = document.createElement('canvas');
      canvasdest.width = w/4;
      canvasdest.height = h/4;
      canvasdest.style.position="absolute";
      canvasdest.style.left=w/2+"px";
      canvasdest.style.top=3*h/8+"px";
      canvasdest.style.backgroundColor="#dcdcdc";
      canvasdest.style.zIndex=0;
 
      document.body.appendChild(canvasdest);
 
      // un objet visuel quelconque à déplacer...----------------------------
      var monDessin=window.document.createElement("canvas");
      monDessin.width=w/4;
      monDessin.height=h/4;
 
      monDessin.style.position="absolute";
      monDessin.style.left=w/100+"px";
      monDessin.style.top=3*h/8+"px";
      monDessin.style.zIndex=1;
      monDessin.style.cursor= "pointer";
 
      document.body.appendChild(monDessin);
 
      var context=monDessin.getContext("2d");
      context.strokeStyle="#000000";
      context.lineWidth=3;
      context.beginPath();
      context.strokeRect(0,0,w/4,h/4);
      context.moveTo(0,0);
      context.lineTo(w/4,h/4);
      context.moveTo(w/4,0);
      context.lineTo(0,h/4);
      context.stroke();
      //------------------------------------------------
 
      monDessin.addEventListener('mousedown',onmousedown);
      addEventListener('mousemove',onmousemove);
      addEventListener('mouseup',onmouseup);
 
      function onmousedown(e){
        permission=true;
        mouseX=e.clientX;
        mouseY=e.clientY;
      }
 
      function onmousemove(e)
      {
        if (permission)
        {
          monDessin.style.left=oldleft+e.clientX-mouseX+'px';
          monDessin.style.top= oldtop+e.clientY-mouseY+'px';
          if ( intersectRect(canvasdest.getBoundingClientRect(),monDessin.getBoundingClientRect() )   )  {
            monDessin.style.left=w/2+"px";
            monDessin.style.top=3*h/8+"px";
            permission=false;   
          }
        }
      }
 
 
      function onmouseup()
      {
        permission=false;
        oldleft=monDessin.offsetLeft;
        oldtop=monDessin.offsetTop;  
      }
 
   function intersectRect(r1, r2) {
    return !(r2.left > r1.right || 
            r2.right < r1.left || 
            r2.top > r1.bottom ||
            r2.bottom < r1.top);
    }   
 
    </script>
 
  </body>
</html>