Drag and drop un élément

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:

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:

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:

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 !