Déplacer des sticky notes en JavaScript

**marvvmaii12** · 28/05/2021, 11h13

Bonjour a tous,

Je suis actuellement en BTS 1er Année dans le domaine info et je travaille actuellement sur un projet perso qui me servira plus tard et je rencontre un soucis de programmation... En effet je réalise un sticky note version lite et j'aimerais déplacer les sticky note de façon a les mettre ou je veux...

Après avoir parcourut le net je n'ai toujours pas trouver la solution... Est-ce que quelqu'un aurait une idée de comment je peux faire pour déplacer les sticky notes avec une fonction ou ligne Javascript ?

Je vous remercie d'avance !

Code html :

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
<!DOCTYPE html>
<html>
    <head>
        <title>InnovWhiteBoard</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="jquery.js"></script>
    </head>
 
    <body>
        <div class="container">
            <div class="btn">
                <button class="bouton" onclick="ajtNote()">Ajouter une idée</button>
                <button class="bouton" onclick="Clear()">Clear</button>
                <br/><br/>
            </div>
            <div class="content" id="#board">
 
            </div>
        </div>
 
    </body>
</html>

Code CSS :

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
.container {
    width: 100%;
    margin-left: 10px;
}
 
.bouton {
    color: #FFF;
    background-color: #504747;
    text-align: center;
    padding: 10px;
    border-radius: 4%;
}
 
body .note {
	display: inline-block;
	padding: 1em;
    min-width: 15%;
	max-width: 460px;
	min-height: 200px;
    max-height: 420px;
	margin: 1% 30px 30px 1%;
	background: linear-gradient(top, rgba(0,0,0,.05), rgba(0,0,0,.25));
	box-shadow: 5px 5px 10px -2px rgba(33,33,33,.3);
	transform: skew(-1deg,1deg);
	transition: transform .15s;
    cursor: move;
    border: solid 2px;
} 
 
.note :hover{
    transform: scale(1.02);
}
 
body textarea {
    min-width: 85%;
	max-width: 420px;
	min-height: 200px;
    max-height: 375px;
    border: 0px;
    padding: 10px;
    margin-top: 9%;
}
 
body .titreNote {
    border: 0px;
    margin-top: 0;
    position: absolute;
    text-transform: uppercase;
    min-width: 70%;
    font-weight: bold;
}
 
.delBtn {
    width: 2px;
    height: 12px;
    margin-top: 0;
    position: absolute;
    background-color:#FFF;
    cursor: pointer;
}
 
.delBtn p{
    margin-top: -5px;
    margin-left: -3px;
}

Code JavaScript :

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
var CompteurNotes = 0;
 
function ajtNote(){
    // comptage des notes
    console.log('note ajoutée');
    CompteurNotes++;
 
    // Création du post-it
    var note = document.createElement('div'); 
    note.className = 'note';
    note.setAttribute('style','margin:'+margin()+'; transform:'+rotate());
    note.style.background = color();
 
    // Création d'un titre pour la note
    var title = document.createElement('input');
    title.type = 'text';
    title.placeholder = 'Ajouter un titre';
    title.className = 'titreNote';
    title.style.background = note.style.background;
    note.appendChild(title);
 
    // Création d'une zone de texte pour écrire
    var zoneTexte = document.createElement('textarea');
    zoneTexte.className = 'contenuNote';
    zoneTexte.placeholder = 'Ecrire quelque chose ici...';
    zoneTexte.style.background = note.style.background;
    note.appendChild(zoneTexte);
 
    // Création du bouton supprimer
    var delBtn = document.createElement('button');
    delBtn.className = 'delBtn';
    delBtn.onmousedown = SupprNote;
    var txt = document.createElement('p');
    txt.className = 'croix';
    var x = document.createTextNode('x');
    txt.appendChild(x);
    delBtn.appendChild(txt);
    note.appendChild(delBtn);  
 
    // numérotation des notes et des boutons supprimer
    note.id = 'Note n°' + CompteurNotes;
    delBtn.id = 'Btn n°' + CompteurNotes;
 
    // ajout du post-it à l'élément body
    var MEP = document.getElementById('#board').appendChild(note);
 
    // Création de la fonction de suppression du post-it
    function SupprNote(){
        var element = document.getElementById(note.id); element. parentNode. removeChild(element);
        console.log('note n°'+note.id + ' supprimée');
    }
 
    // Fonction personnalisation post-it
    // marge aléatoire
    function margin(){
        var random_margin = ["-1px","1px", "5px", "10px","15px","20px"];
 
        return random_margin[Math.floor(Math.random() * random_margin.length)];
    }
 
    // rotation aléatoire
    function rotate(){
        var random_degree = ["rotate(3deg)","rotate(1deg)","rotate(-1deg)","rotate(-3deg)","rotate(-4deg)", "rotate(5deg)"];
 
        return random_degree[Math.floor(Math.random() * random_degree.length)];
    }
 
    function color(){
        var i = Math.floor(Math.random() * 7);
        var random_colors = ["#c2ff3d","#ff3de8","#3dc2ff","#04e022","#bc83e6","#ebb328"];
 
        if(i > random_colors.length - 1){
          i = 0;
        }
        return random_colors[i];
    }
 
}
 
// Création de la fonction permettant de suppprimer tous les post-it d'un coup
function Clear(){
    document.getElementById('#board').innerHTML = "";
    }

**VertoDebru** · 29/05/2021, 11h55

https://developer.mozilla.org/fr/doc...g_and_Drop_API

Déplacer des sticky notes en JavaScript

JavaScript

Discussions similaires

Partager

Partager