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

**derzy971** · 04/03/2010, 20h29

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 :

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

**derzy971** · 04/03/2010, 20h53

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é

Quelqu'un pourrait-il m'aider ?

Merci

**danielhagnoul** · 05/03/2010, 00h44

Bonsoir.

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

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

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

**Sourrisseau** · 05/03/2010, 09h48

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.

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

jQuery

Discussions similaires

Partager

Partager