UI Draggable. Comment créer un objet dynamiquement en lui ajoutant un effet draggable ?

Version imprimable

Bonjour,

je débute dans le javascript et aussi dans le framework jquery, je fais des tests pour créer un objet dynamiquement et lui ajouter du drag and drop.

Mon objet est bien crée mais je n'arrive pas à lui attribuer le drag and drop (pourtant j'ai essayé simplement et sa fonctionne).

Voici mon code:
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Exemples Jquery</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="interface.js"></script> <style> #draggable{background-color:red; height:50px;width:100px;} </style> <script type="text/javascript"> function create() { var cadre=document.createElement('div'); document.body.appendChild(cadre); cadre.setAttribute("id","draggable"); var par=document.createElement('p'); var texte=document.createTextNode("message test"); par.appendChild(texte); cadre.appendChild(par); } $(function() { $("#draggable").draggable(); } ); </script> <input type="button" value="test" onclick="create()" /> </body> </html>
pouvez-vous m'aider ?
est-il possible de définir la position initial de l'objet pour le drag and drop ? j'ai vu qu'il y avait ui.position, mais je ne vois pas comment l'utiliser.

PS : la création de l'élément c'est du js simple (je débute vraiment)

Merci d'avance

04/03/2010, 20h53
derzy971

J'ai trouvé, il suffisait de créer une fonction pour le drag and drop et de l'appeler dans la fonction create

Mais pour la position, je n'ai toujours pas trouvé :cry:
Quelqu'un pourrait-il m'aider ?

Merci

Bonsoir.

[Edit 1h05 modification du code, un id doit être unique !]

Exemple (n'oubliez pas d'inclure les librairies et les styles UI) :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		@import url(../lib/humanity/jquery-ui-1.7.2.custom.css);
 
		@font-face {
		  font-family: "Bitstream Vera Serif Bold";
		  src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
		}
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
			overflow:scroll;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		.divDraggable {
			background-color:red;
			height:50px;
			width:100px;
		}
 	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script charset="CP-1252" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script>
		$(function(){
			$("#btn").click(function(){
				$("<div/>", {
					id:"draggable" + new Date().getTime(),	// un id doit être unique !
					class:"divDraggable",
					html:"<p>message text</p>",
					css:{
						position:"relative",
						top:"200px",
						left:"100px",
						margin:"12px",
						padding:"6px",
						border:"1px solid #999999"
					}
				}).appendTo("#conteneur").draggable({
					stop:function(event, ui){
						// firebug : contrôle les id
						console.log(this.id);
					}
				});
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btn">Test</button>
	</div>
</body>  
</html>

05/03/2010, 09h48
Sourrisseau

Très beau

code ... il n'y a rien a dire a part Bravo. tu intègres 'Quick Element Construction' proposé par la dernière version de jquery à merveille. C'est étonnant comment le code devient lisible et agréable même pour quelque chose qui aurait pu être beaucoup plus lourd.