Créer une div draggable et contentEditable [Résolu]

Vortexia · 02/01/2012, 22h17

Bonjour à tous,

Bonne année 2012.

J'ai besoin d'aide étant debutant en javascript, j'aimerais créer dynamiquement une div qui soit draggable et contentEditable.

J'arrive à creer une div mais n'est pas editable ni draggable, je n'utilise pas les plug in de jquery.

Voilà mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function creer() {
maDiv = document.createElement("div");
maDiv.id = 'boxA';
maDiv.draggable = 'true';
maDiv.ondragstart = 'return dragStart(event)';
document.body.appendChild(maDiv);
 
monP = document.creatElement ("p");
monP.id = 'ptext';
monP.contentEditable = 'true';
maDiv.monP.innerHTML = 'Ceci est le contenu du P'; //Peut contenir de l'html
document.getElementById(maDiv).append(monP);
//document.body.maDiv.appendChild(monP);
 }

Merci par avance pour votre aide.
Si il n'y a pas solution, je me contenterai d'une en jquery... merci.

RomainVALERI · 03/01/2012, 09h29

Code :

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

maDiv.ondragstart = 'return dragStart(event)';

ondragstart ? dragStart ? Ou sont-ils définis ?

rotrevrep · 03/01/2012, 09h32

bonjour Vortexia.
ne t'avais-je pas donné les explications il y a peu de temps sur le Chat ?

N.B : ne mélangeons pas jQuery et javascript

Vortexia · 03/01/2012, 21h44

Oui j'ai oublié de posté le code ou je définis les autres fonctions:

Javascript:

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
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}

Html:

Code html :

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

<input name="editer" type="button" class="p1" dir="ltr" lang="fr" onClick="creer()" value="editer">

Merci de m'éclaircir ma lanterne, je suis vraiment dans l'ombre.

Oui exacte Rotre, tu m'as expliqué sur le chat mais je n'arrive pas à faire fonctionner mes deux propriétés dragndrop et contenteditable en meme temps dans une creation dynamique de div sur clik d'un bouton.

Quel est la différence entre jquery et javascrit ? Désolé je débute.

Merci de vos réponses.

Willpower · 03/01/2012, 22h13

Citation:

Envoyé par RomainVALERI

Code :

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

maDiv.ondragstart = 'return dragStart(event)';

ondragstart ? dragStart ? Ou sont-ils définis ?

A mon avis il a voulu faire :

Code :

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

maDiv.ondragstart = new Function('return dragStart(event)');

mekal · 03/01/2012, 23h35

et il me semble que au lieux de mettre

Code :

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

ev.target

c'est plutot

Code :

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

evt.currentTarget

et pour ie < 9

Code :

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

event.srcElement

Bovino · 04/01/2012, 10h06

Citation:

Envoyé par RomainVALERI

ondragstart ? dragStart ? Ou sont-ils définis ?

ondragstart est un événement du DOM

RomainVALERI · 04/01/2012, 11h47

Citation:

Envoyé par Bovino

ondragstart est un événement du DOM

Tu as raison

On l'a ici.
Mes références datent parfois un peu.

Vortexia · 04/01/2012, 18h57

Salut à tous,

J'ai essayé vos suggestions willpower et Mekal, rien ne fonctionne, la div est bien créer à l'appui du bouton mais sans la proprité Dragndrop ou contentEditable.

Pourtant quand je crée la div en dur sur le htlm ça marche:

Code html :

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

1
2
3
<div id="boxC" draggable="true" ondragstart="return dragStart(event)" >
   <p id="ptext" contentEditable="true"> . </p>
</div>

Voici le code complet de la page si quelqu'un pouvait me debloquer la situation:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="Draggable.js"></script>
 
<style type="text/css">
 
 
#boxA, #boxB, #boxC {
   float:left;padding:10px;margin:10px;-moz-user-select:none;
}
 
#boxA { border: 1px solid #CCC;
		border-radius: 20px;
        width: 200px;
        height: 50px;
        float: right;
        margin: 10px;
		/*background: url("images/papier.png")*/;
		 }
#boxB { border: 1px solid #CCC;
        width: 250px;
        height: 400px;
        float: left;
        margin: 10px; }
#boxC { border: 1px solid #CCC;
		border-radius: 20px;	
        width: 200px;
        height: 50px;
        float: right;
        margin: 10px;
		position: relative;
		/*background: url("images/papier.png");*/		}
#ptext { position: relative;
		margin-top: 0px;
		margin-right: 180px;
		margin-bottom: 0px;
		margin-left: 0px;}
</style>
 
<script>
 
 
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
    return false;
}
function dragDrop(ev) {
   var src = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(src));
   ev.stopPropagation();
   return false;
}
 
</script>
<script>
function creer() {
maDiv = document.createElement("div");
maDiv.id = 'boxA';
maDiv.class = 'sample';
//maDiv.contentEditable = 'true';
maDiv.draggable = 'true';
maDiv.ondragstart = new Function('return dragStart(event)');
//maDiv.ondragStart = 'return dragStart(event)';
 
document.body.appendChild(maDiv);
 
monP = document.creatElement ("p");
monP.id = 'ptext';
monP.contentEditable = 'true';
maDiv.monP.innerHTML = 'Ceci est le contenu du P'; //Peut contenir de l'html
//maDiv.onclick = function(){alert('click !');}; //Évènement ayant lieu lors du click sur la div
document.getElementById(maDiv).append(monP);
//document.body.maDiv.appendChild(monP);
 }
function clone(){i = i +1;
var e = $("<div id='box_"+i+"'></div>").appendTo("#boxB");
 
$("#boxd").clone().prependTo(e);}
 
</script>
</head>
 
<body>
 
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the div to the dustin div</div>
 
 
<div id="boxC" draggable="true" ondragstart="return dragStart(event)" >
   <p id="ptext" contentEditable="true"> . </p>
</div>
<input name="adhérer" type="button" class="p1" dir="ltr" lang="fr" onClick="creer()" value="Ma page">
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">Dustbin</div>
 
</center> 
</body>
</html>

Merci de vos réponses encore une fois, on le dira jamais assez

RomainVALERI · 04/01/2012, 19h00

Citation:

Envoyé par Vortexia

on le dira jamais assez

Y'a d'autres trucs qu'on ne dira jamais assez...

genre ne pas oublier les balises code autour des extraits ? ^^

mekal · 04/01/2012, 20h02

le script cree est remplis d'erreur

essai comme ca

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
 
function creer() {
 
if(typeof this.compteur_id == 'undefined'){
		this.compteur_id = 0;
	}
this.compteur_id++
 
maDiv = document.createElement("div");
maDiv.id = 'box'+this.compteur_id;
 
maDiv.setAttribute('class','boxA');
 
maDiv.draggable = 'true';
maDiv.addEventListener('dragstart',dragStart, false);
 
maDiv.addEventListener('drop',dragDrop, false);
monP = document.createElement("p");
monP.id = 'ptext';
monP.contentEditable = 'true';
monP.innerHTML = 'Ceci est le contenu du P'; //Peut contenir de l'html
 
maDiv.appendChild(monP);
 
document.body.appendChild(maDiv);
 
 
}

et modifie le css afin de mettre une class boxA plutot qu'un id

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.boxA, #boxB, #boxC {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
 
.boxA {
border: 1px solid #CCC;
border-radius: 20px;
width: 200px;
height: 50px;
float: right;
margin: 10px;
/*background: url("images/papier.png")*/;
}

ps : utilise la balise code pour inseré du code ca sera plus lisible

Vortexia · 04/01/2012, 20h23

Merci Mekal

IT WORKS

Encore merci on le dira jamais assez

J'en prends de la graine, je n'oublierais pas les balises code la prochaine fois, je suis new....c'est donc ça ^^ les balises codes si je comprends bien, j'ai vu aussi ça code /code .

Un petit commentaire sur mes erreurs et tes modifs couronnerais ce post de 5 etoiles et deviendrai un veritable tuto ou reference pour d'autres.
Bon j'exagéres peut être, mais ça serais bien.

En attendant je court le marquer comme resolu.

MERCI à TOUS. Vous me reverrez surement bientot

Vortexia · 04/01/2012, 20h51

Encore moi, je vous avez dis que je reviendrais.
juste pour suggérer à quiconque voudrais apportez une amélioration au javascript pour que:

-que la div soit vierge à la création avec juste le curseur
-qu'a l'edition de la div, la touche espace n'est pas pour evenement un retour chariot
-que ce retour chariot soit effectif seulement en bout de div
-qu'au drop dans la div dustin, la div créer perde ses propriétés (au moins celle de l'edition pour éviter la modification du texte dans la div cible)==>ceci est je crois possible en modifiant la class de la div

Merci encore aux contributions.(si seulement je savez faire tous ça)

RomainVALERI · 04/01/2012, 21h01

Citation:

Envoyé par Vortexia

(si seulement je savez faire tous ça)

Si seulement c'était tout-à-fait possible !

Vortexia · 04/01/2012, 22h02

Rassure moi tout ceci est possible.

En informatique tout est possible, seul les hommes sont limités, non ?

03/01/2012, 09h29	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 582 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 582 Points : 4 088 Points : 4 088	Code : Sélectionner tout - Visualiser dans une fenêtre à part maDiv.ondragstart = 'return dragStart(event)'; ondragstart ? dragStart ? Ou sont-ils définis ? __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	10

03/01/2012, 09h32	#3
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	bonjour Vortexia. ne t'avais-je pas donné les explications il y a peu de temps sur le Chat ? N.B : ne mélangeons pas jQuery et javascript __________________ (marquer un post résolu si vous êtes satisfait de la réponse ) le chat caramail de retour ? :/ http://www.tchats.net/beta.php les projets web en cours sont sur : https://github.com/rotrevrep
	00

03/01/2012, 23h35	#6
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 472 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 472 Points : 617 Points : 617	et il me semble que au lieux de mettre Code : Sélectionner tout - Visualiser dans une fenêtre à part ev.target c'est plutot Code : Sélectionner tout - Visualiser dans une fenêtre à part evt.currentTarget et pour ie < 9 Code : Sélectionner tout - Visualiser dans une fenêtre à part event.srcElement __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

04/01/2012, 20h23	#12
Vortexia Invité de passage ingenieur Inscription : janvier 2012 Messages : 17 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : ingenieur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2012 Messages : 17 Points : 2 Points : 2	Merci Mekal IT WORKS Encore merci on le dira jamais assez J'en prends de la graine, je n'oublierais pas les balises code la prochaine fois, je suis new....c'est donc ça ^^ les balises codes si je comprends bien, j'ai vu aussi ça code /code . Un petit commentaire sur mes erreurs et tes modifs couronnerais ce post de 5 etoiles et deviendrai un veritable tuto ou reference pour d'autres. Bon j'exagéres peut être, mais ça serais bien. En attendant je court le marquer comme resolu. MERCI à TOUS. Vous me reverrez surement bientot
	00

04/01/2012, 20h51	#13
Vortexia Invité de passage ingenieur Inscription : janvier 2012 Messages : 17 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : ingenieur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2012 Messages : 17 Points : 2 Points : 2	Encore moi, je vous avez dis que je reviendrais. juste pour suggérer à quiconque voudrais apportez une amélioration au javascript pour que: -que la div soit vierge à la création avec juste le curseur -qu'a l'edition de la div, la touche espace n'est pas pour evenement un retour chariot -que ce retour chariot soit effectif seulement en bout de div -qu'au drop dans la div dustin, la div créer perde ses propriétés (au moins celle de l'edition pour éviter la modification du texte dans la div cible)==>ceci est je crois possible en modifiant la class de la div Merci encore aux contributions.(si seulement je savez faire tous ça)
	00

04/01/2012, 22h02	#15
Vortexia Invité de passage ingenieur Inscription : janvier 2012 Messages : 17 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : ingenieur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2012 Messages : 17 Points : 2 Points : 2	Rassure moi tout ceci est possible. En informatique tout est possible, seul les hommes sont limités, non ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email