Création d'un bouton

**younesssoleil** · 28/07/2016, 01h40

Bonjour ( PI: je suis débutant en JS)
Je souhaite en cliquant sur un bouton que j'ai crée via le code ci-dessous ==> créer un bouton qui a comme valeur le texte affiché dans une zone de text 'newevent'
je souhaite que les boutons crées soient déplaçable avec la souris et identifiable avec un ID.
par exemple: si je rentre le mot test1 dans ma zone newevent, et je click sur OK, je crée un bouton qui a comme valeur 'test1' et si je click sur test1
je réalise un événement par exemple incrémenter une valeur dans un tableau.

j'ai essayé plusieurs jours mais sans résultats.
Merci d'avance de votre aide.

Code html :

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

1
2
3
<input type="button" onclick="créationbouton()" value="OK"/>
 
<input type="text" name="newevent" id="newevent"/>

**mathieu** · 28/07/2016, 07h57

cela peut se faire facilement avec jQuery, par exemple comme cela :
http://api.jquery.com/append/

**MehrezLabidi** · 28/07/2016, 09h04

peu de JQuery

pour le depalcement https://jqueryui.com/draggable/
pour l'ajout d'un bouton :http://api.jquery.com/append/

**younesssoleil** · 28/07/2016, 12h35

Merci...
Je vais apprendre jQuery..)))
si ce n'est pas trop compliqué et pour que je puisse avancer merci de me fournir le code svp...
Merci de voter aide

**sekaijin** · 28/07/2016, 18h23

Code :

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

1
2
3
4
5
6
7
function creationbouton() {
  var btn =  document.createElement('button'); //créer le bouton
  vart input = document.getElementById('newevent');//récupérer l'input
  btn.setAttribute('name', input .value); //lui donner son nom
  input.parentNode.insertBefore(btn, input.nextSibling);//l'insérer dans le dom où on veut: ici après l'input 
  //(insérer parmi les fils du parent de l'input, avant le suivant de l'input)
}

tout aussi simple en javascript

A+JYT

**younesssoleil** · 28/07/2016, 23h41

Merci sekaijin
j'arrive bien à créer les boutons
ils sont tout petits.. comment gérer stp leur dimensions?
Comment les placer un endroit donnée?
et pour terminer...) comment les rendre déplaçable avec la souris?
Merci bcp de votre aide

**younesssoleil** · 29/07/2016, 10h40

Pour les dimensions j'ai trouvé..

Code :

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

btn.style= "width:60px; height:40px";

**younesssoleil** · 29/07/2016, 17h55

Re bonjour

en plus des deux points restants ci-dessous:

Comment les placer à un endroit donnée?
comment les rendre déplaçable avec la souris?

je n'arrive pas à leur donner une valeur ( texte à l’intérieur du bouton)
Merci encore de votre aide.

**younesssoleil** · 30/07/2016, 00h43

Pour le pb d'afficher la valeur du bouton .. c'est un bug du navigateur.. ca marche avec IE mais pas avec chrome..bizzard

**NoSmoking** · 30/07/2016, 09h48

Bonjour,

Pour le pb d'afficher la valeur du bouton .. c'est un bug du navigateur..

comment crées tu ton « bouton », montre nous ton code.

Comment les placer à un endroit donnée?
comment les rendre déplaçable avec la souris?

Pour les glisser/déposer il existe pour l'HTML5

7.7 Drag and drop — HTML5 (w3.org)
HTML Drag and Drop API (developer.mozilla.org)

**younesssoleil** · 30/07/2016, 12h17

Re bonjour

pour la création des boutons j'utilise le code de sekaijin ci-dessous:

Code :

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

1
2
3
4
5
6
7
function creationbouton() {
  var btn =  document.createElement('button'); //créer le bouton
  vart input = document.getElementById('newevent');//récupérer l'input
  btn.setAttribute('name', input .value); //lui donner son nom
  input.parentNode.insertBefore(btn, input.nextSibling);//l'insérer dans le dom où on veut: ici après l'input 
  //(insérer parmi les fils du parent de l'input, avant le suivant de l'input)
}

**younesssoleil** · 30/07/2016, 12h43

Désolé mais pour le drag and drop impossible de trouver un exemple simple pour les débutant....
si vous en avez un je suis preneur...Merci

**sekaijin** · 30/07/2016, 12h49

réponse ligne 5 dans le code ci dessus.

A+JYT

**NoSmoking** · 30/07/2016, 16h15

Désolé mais pour le drag and drop impossible de trouver un exemple simple pour les débutant....

je pense que tu n'as pas dû chercher vraiment ou chercher l'exemple qui colle pile poil à ta problématique.

Voici un exemple de mise en oeuvre de ton « besoin », mais rien n'est moins sûr !

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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemple de Drag and drop sans le Drop !</title>
<meta name="Author" content="NoSmoking">
<style>
html,
body {
  height: 2000px;
  margin: 0;
  font: 1em/1.5em Verdana;
}
#main {
  margin: auto;
  max-width: 60em;
}
[draggable=true] {
  cursor: move;
}
#btn_create {
  display: block;
  font: 1em/2.5em Verdana;
}
.elem-new {
  display: block;
  position: absolute;
  top: 40%;
  left: 40%;
  margin: 0;
  padding: 0.25em 0.5em;
  border: 1px solid #abc;
  line-height: 2.5em;
  white-space: nowrap;
  word-break: normal;
  background: #fff;
  box-shadow: 0 0 10px #abc inset;
}
</style>
<body>
<div id="main">
  <div class="header">
    <h1>Exemple de Drag  sans le Drop !</h1>
  </div>
  <div class="section">
      <p>
          <button id="btn_create">Création élément</button>
      </p>
    </div>
  </div>
</div>
<script>
var handleDragStart = function (e) {
    var oElem = e.target;
    // position initiale de l'élément
    oElem.originalX = e.screenX;
    oElem.originalY = e.screenY;
    oElem.id = 'move_encours';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('Text', oElem.id);
};
var handleDragEnd = function (e) {
    var oElem = e.target;
    // on replace à l'écran
    oElem.style.top = oElem.offsetTop + (e.screenY - oElem.originalY) + 'px';
    oElem.style.left = oElem.offsetLeft + (e.screenX - oElem.originalX) + 'px';
    oElem.id = '';
    // place l'élément au premier plan
    oElem.parentNode.appendChild(oElem);
};
// autorise le déplacement sur la totalité du document
document.addEventListener('dragover', function (e) {
    e.preventDefault();
}, false);
 
// initialistion
document.querySelector('#btn_create').onclick = function () {
    // création élément
    var oElem = document.createElement('button');
    oElem.className = 'elem-new';
    oElem.setAttribute('draggable', 'true');
    // gestion du DnD
    oElem.ondragstart = handleDragStart;
    oElem.ondragend = handleDragEnd;
    // ajout d'un texte
    oElem.textContent = 'New element #' + (document.querySelectorAll('.elem-new').length + 1);
    // ajout élément
    document.querySelector('body').appendChild(oElem);
};
</script>
</body>
</html>

c'est minimaliste, maintenant à toi de faire l'effort d'adapter/modifier.

**younesssoleil** · 30/07/2016, 17h08

Merci çà marche et oui effectivement il faut que je l'adapte
les gars soyer un peu indulgent avec les débutants...) je débute en js donc des choses évidente pour vous..il nous faut des jours de travail pour les trouver..
donc votre aide est très précieux pour qu'on avance dans nos projets
Merci encore de votre aide.

**younesssoleil** · 04/08/2016, 19h10

Re bonjour;
Malgré mes recherches, je n'arrive pas à adapter le code ci-dessous de Nosmoking.
On crée bien des boutons avec le texte: New element #1... mais je n'arrive pas à leur affecter une fonction par exemple incrémenter une cellule d'un tableau en
fonction de leur indice : par exemple le New element #1 incrémente la cellule 1, New element #2 incrémente la cellule 2,....
Merci de m'aider à trouver la solution...
Cdt

**NoSmoking** · 05/08/2016, 11h09

A chaque création d'un l'élément il te suffit de lui affecter une fonction sur son onclick.
par exemple :

Code :

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

1
2
3
oElem.onclick = function(){
    alert( this.textContent);
};

**younesssoleil** · 05/08/2016, 11h30

Re bonjour
J'ai réussi.. mais je n'arrive pas à récupérer l'ID du bouton une fois déplacer
je pense qu'il faut rajouter la fonction getdata mais je ne sais pas ou?

**NoSmoking** · 06/08/2016, 22h32

et si seulement on savait ce que tu cherches à faire, en quoi l'id du bouton peut te servir si ce n'est au moment du drag.

**younesssoleil** · 07/08/2016, 00h38

Mon but est d'identifier le bouton créer quand je click dessus

Mais j'ai trouvé on utilisant sont : oElem.value.
Peux tu me dire si ce n'est pas trop compliqué comment limiter la surface de déplacement des boutons créer:
je m'explique un peu plus... dans ma page j’insère une vidéo avec la balise <video> et je souhaite si c'est possible que le déplacement de mes boutons se fassent
uniquement au sein de cette vidéo et non en dehors.
Merci encore de ton aide.
cdt

Création d'un bouton

JavaScript

Discussions similaires

Partager

Partager