Hello,

Je tente de faire un post-it que je peux déplacer depuis un moment: un bordel monstre. J'ai essayé une tonne de choses pour arriver à un résultat à peu près correct mais j'ai encore un bug. Le post-it ne se déplace pas tout de suite, il faut cliquer d'abord une fois dessus pour que ça fonctionne.

Code de mon component:
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
    dragElement(divId) {
        divId = document.getElementById(divId);
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById("topBar")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById("topBar").onmousedown = dragMouseDown;
        } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            divId.onmousedown = dragMouseDown;
        }
 
        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }
 
        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            divId.style.top = (divId.offsetTop - pos2) + "px";
            divId.style.left = (divId.offsetLeft - pos1) + "px";
        }
 
        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
Code HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="postIt">
                        <div id="topBar" (click)="dragElement('postIt')">MOVE ME</div>
                        <div contenteditable class=textAria>
                            Write your characteristics here !
                        </div>
                    </div>
En bonus le css:
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
#topBar {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color:#f39c12;
    color: #fff;
    text-align: center;
}
 
#postIt {
    position: absolute;
    z-index: 1;
    border: 1px solid #d3d3d3;
    background-color:#f1c40f;
    font-family: 'Lato', sans-serif;
  	overflow:hide;
    width: 200px;
}
 
.textAria{
    margin: 10px;
    min-height: 150px;
}
 
.textAria:focus{
    outline: 0;
}
J'ai essayé de remplacer le '(click)' par à peu près tout ce qui tourne autour du drag, le problème est toujours là. J'ai fait le tour d'à peu près tous les stackoverflow et j'ai essayé un paquet de choses... Quelqu'un saurait résoudre ce petit soucis ?
Merci d'avance !