Discussion :

[younesssoleil]

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]

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

[MehrezLabidi]

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

[younesssoleil]

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]

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]

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]

Pour les dimensions j'ai trouv�..

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[younesssoleil]

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]

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]

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]

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]

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]

r�ponse ligne 5 dans le code ci dessus.

A+JYT

[NoSmoking]

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]

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]

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]

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]

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]

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]

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