Discussion :

[lola13]

Bonsoir,

J'ai fait quelque recherche sur internet mais je ne suis pas satisfait de ce que j'ai trouver.

Enfaite je dois modifier un code qui a déjà été réalisé par une personne et apparamant le drag en drop ne fonctionne pas. Je ne m'y connais pas en Ajax. Ce que je sais c'est qu'il utilise Scriptaculous. et le drag en drop ne fonctionne pas.

Voici le code que j'ai.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul class="sortabledemo" id="menu3">
 <li class="draggable"  id="pub">
   <div class="handle_content">
	<div class="handle" id="pubs"></div>
	<center>
	<div id="pub_moitie"></div>
	</center>
	<div class="handle" id="pubs_bas"></div>
	</div>
 </li>
</ul>

Bien entendu j'ai l'appel des js qui ce font en haut de page

Code :

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

1
2
3
4
 
<script src="scriptaculous/prototype.js" type="text/javascript">
</script>
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>

Et voici le css

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
 
.draggable{
	/*border:3px solid black;*/
	list-style:none;
	width:100%;
	margin-bottom:10px;
	float:left;
	background-color: #FFFFFF;
}
.handle_content{
	/*border:1px solid #EBEEC1;*/
	background-color: #DBDBDB;
}
.handle{
	cursor:move;
	background-image:url('../image/site/jaune.jpg');
	text-align:center;
	font-weight:bold;
	color:#000000;
	height:20px;
 
	overflow:hidden !IMPORTANT;
}
.sortabledemo{
	/*border:3px solid red;*/
	margin-left:-10px;
	float:left;
	width:95%;
}
 
.draggable{
	/*border:3px solid black;*/
	list-style:none;
	width:100%;
	margin-bottom:10px;
	float:left;
	background-color: #FFFFFF;
}
#pubs{
	background-image:url('../image/site/global/bloc_accueil/pub.png');
}
 
#pubs_bas{
	height:41px;
	width:228px;
	background-image:url('../image/site/global/bloc_accueil/pub_bas.png');
	background-repeat:no-repeat;
	background-position:bottom;
}

Voila il me semble que c'est tout. Il doit y avoir une erreur et quelque chose qui na pas été appeller. J'ai essayé de regarder sur le net mais sans succées.

J'espère que quel qui un pourra m'aider pour résoudre mon problème

Salutations

[Bovino]

Euh... tu n'as pas de javascript indiquant new Draggable(...) et Droppable.add(...) quelque part ?
Sinon, ne cherches pas plus loin, il ne suffit pas de charger les scripts, il faut aussi les appeler et les initier.

[lola13]

Non je n'ai rien de cela dans ma page. Serai tu comment dois-je les mettre???

[Bovino]

Non je n'ai rien de cela dans ma page. Serai tu comment dois-je les mettre???

Non, pas vraiment car il y a des paramètres à préciser que je ne connais pas, cela dépend de la manière dont ta page est réalisée et de ce que tu souhaites faire...
En revanche, tu peux consulter la documentation (en anglais) pour les Draggables et les droppables.

[van___fanel]

Non je n'ai rien de cela dans ma page. Serai tu comment dois-je les mettre???

Voila mon appel :

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
var photos = document.getElementsByClassName('draggable');
for (var i = 0; i < photos.length; i++) {
	new Draggable(photos[i].id, {ghosting:true, revert:true})	
}
Droppables.add('cartContainer', {onDrop:changePosition})
</script>

Dans mon cas, les élements draggables ont la classe "draggable", et l'élément dans lequel je peux les drop a l'ID "cartContainer". A toi de jouer pour l'adapter à ton projet.