Créer une div draggable et contentEditable

Version imprimable

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:

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.

03/01/2012, 09h29
RomainVALERI

Code:

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

:koi: ondragstart ? dragStart ? Ou sont-ils définis ?
03/01/2012, 09h32
Rachel

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 :calim2:

Mes definitions

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

Javascript:
Code:

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:

<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.

03/01/2012, 22h13
Willpower

Citation:

Envoyé par RomainVALERI

Code:

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

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

A mon avis il a voulu faire :

Code:

maDiv.ondragstart = new Function('return dragStart(event)');
03/01/2012, 23h35
Invité

et il me semble que au lieux de mettre

Code:

ev.target

c'est plutot

Code:

evt.currentTarget

et pour ie < 9

Code:

event.srcElement
04/01/2012, 10h06
Bovino

Citation:

Envoyé par RomainVALERI

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

ondragstart est un événement du DOM ;)
04/01/2012, 11h47
RomainVALERI

Citation:

Envoyé par Bovino

ondragstart est un événement du DOM ;)

Tu as raison :oops:
On l'a ici.
Mes références datent parfois un peu. :aie:

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:

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:

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

04/01/2012, 19h00
RomainVALERI

Citation:

Envoyé par Vortexia

on le dira jamais assez

Y'a d'autres trucs qu'on ne dira jamais assez... :whistle: genre ne pas oublier les balises code autour des extraits ? ^^

;)

le script cree est remplis d'erreur

essai comme ca

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
 
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:

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

04/01/2012, 20h23
Vortexia

Merci Mekal :ave: IT WORKS

Encore merci on le dira jamais assez :ave:

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 :D
04/01/2012, 20h51
Vortexia

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)
04/01/2012, 21h01
RomainVALERI

Citation:

Envoyé par Vortexia

(si seulement je savez faire tous ça)

Si seulement c'était tout-à-fait possible ! :mrgreen:
04/01/2012, 22h02
Vortexia

Rassure moi tout ceci est possible.

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