[Prototype/Scriptaculous] Drag and drop et scriptaculous [Résolu]

[grunk]

Salut à tous,

je réalise actuellement un drag&drop avec prototype et scriptaculous mais je rencontre un petit problème.

Le principe :
J'ai une zone de reception dont l'id est "principal" qui va recevoir tous les objet qui aurot été déclaré comme draggable.
Jusqu'ici pas de problème ca marche très bien.

Mais j'ai besoin de généré ma zone de réception en javascript(elle peut être différente selon les cas).
J'utilise donc quelque chose comme :

Code :

$('cible').innerHTML = '<div id="principal"><div id="autre"></div></div>';

pour modifier le contenu de ma page

Or dès que ma zone de reception d'objet est généré par javascript plus moyen d'y glisser déposer quoi que ce soit.
Ma zone créer en html au chargement de la page marche parfaitement mais si je recharge cette même zone en cliquant sur un lien ,donc par JS, ca ne marche plus.

pour déclarer mon div en tant que zone de réception j'utilise :

Code :

1
2
3
4
5
var products = document.getElementsByClassName('droppable');
			for (var i = 0; i < products.length; i++) {
				new Draggable(products[i].id, {ghosting:true, revert:true})	
			}
			Droppables.add('principal', {onDrop:addProduct})

Si quelqu un à une idée

[denisC]

Envoyé par grunk

Or dès que ma zone de reception d'objet est généré par javascript plus moyen d'y glisser déposer quoi que ce soit.
Ma zone créer en html au chargement de la page marche parfaitement mais si je recharge cette même zone en cliquant sur un lien ,donc par JS, ca ne marche plus.

Tu déclares bien tes Draggables et Droppables après avoir construit ta nouvelle div?

Tu as essayé une insertion DOM plutot que innerHTML?

[grunk]

Oui je déclare bien mes draggable et droppables après. Je vais essayer de changer le contenu avec Dom comme tu le conseil.

[grunk]

Me revoici, après quelques modifications.

J'ai dans ma page un div :

Code :

<div id="dropzone" class="dropzone"></div>

qui à pour but de recevoir mes images qui ont été déclarer comme élément draggable.

J'ai également 3 lien qui font appel à la fonction JS suivante dont le but est de mettre à jour le contenu du div :

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
function affichCadre(type)
{
	var divHtml = $('dropzone');
	if(type==1) // Fullscreen
	{
	divHtml.innerHTML = '';
		var conteneur =  document.getElementById('dropzone');
		var fullScreenDiv = document.createElement("div");
		conteneur.appendChild(fullScreenDiv);
		fullScreenDiv.setAttribute("id","principal");
		fullScreenDiv.setAttribute("class","fullscreen");
		//var fullscreen = '<div class="fullscreen" id="principal"></div>';
		//divHtml.innerHTML = '';
 
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
		new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('principal', {onDrop:addProduct})
	}
	else if(type==2) // Horizontal
	{
	divHtml.innerHTML = '';
		var conteneur =  document.getElementById('dropzone');
		// Div fullscreen
		var fullScreenDiv = document.createElement("div");
		conteneur.appendChild(fullScreenDiv);
		fullScreenDiv.setAttribute("id","principal");
		fullScreenDiv.setAttribute("class","fullscreenH");
		//Div horizontal
		var horizontalDiv = document.createElement("div");
		conteneur.appendChild(horizontalDiv);
		horizontalDiv.setAttribute("id","bas");
		horizontalDiv.setAttribute("class","horizontal");
		//var horizontal = '<div class="fullscreenH" id="principal"></div><div class="horizontal" id="gauche"></div>';
		//divHtml.innerHTML = horizontal;
 
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
		new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('principal', {onDrop:addProduct})
 
		// Déclaration des entité glissable/deposable
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
			new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('bas', {onDrop:addProduct})
	}
	else if(type==3) //Vertical
	{
		divHtml.innerHTML = '';
		var conteneur =  document.getElementById('dropzone');
 
		//Cadre gauche
		var cadreGauche = document.createElement("div");
		conteneur.appendChild(cadreGauche);
		cadreGauche.setAttribute("class","cadreLeft");
 
			//Div vertical
			var verticalDiv = document.createElement("div");
			cadreGauche.appendChild(verticalDiv);
			verticalDiv.setAttribute("class","vertical");
			verticalDiv.setAttribute("id","gauche");
 
		//cadre droit
		var cadreDroit = document.createElement("div");
		conteneur.appendChild(cadreDroit);
		cadreDroit.setAttribute("class","cadreDroit");
 
			//div principal
			var principalDiv = document.createElement("div");
			cadreDroit.appendChild(principalDiv);
			principalDiv.setAttribute("class","fullscreenV");
			principalDiv.setAttribute("id","principal");
 
		//var vertical = '<div class="cadreLeft"><div class="vertical" id="gauche" ></div></div><div class="cadreDroit"><div class="fullscreenV" id="principal"></div></div>';
		//divHtml.innerHTML = vertical;
 
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
		new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('principal', {onDrop:addProduct})
 
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
			new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('gauche', {onDrop:addProduct})
	}
}

Celà permet de créer un carré avec divers partie pouvant recevoir des éléments : http://img73.imageshack.us/img73/6858/boxjr2.gif

Sous FF et opéra pas de soucis ca marche très bien. En revanche sous Internet explorer absolument rien ne s'affiche. Je click sur le premier lien pour générer un carré plein écran par exemple mais il n'apparait pas. En revanche je peux déplacer mes objet (preuve donc que le drag and drop a bien été instancié).
Si je reclic sur un lien par contre le drag and drop ne marche plus et ce définitivement. Comme si le fait de redéclarer des drag and drop bloquait le tout

Si vous avez des idées , pour dans un premier temps arriver à afficher quelques choses sous ie puis pour le drag and drop ^^

[blacksabbath]

salut, j'ai peut être ta solution : j'avais à peu près le même problème que toi sur un projet de gestion d'une arborescence de fichiers ou l'utilisateur pouvait déplacer ses dossiers etc en drag and drop. Suite à un premier déplacement , j'effectuais mon script serveur en ajax pour mettre à jour la base de données et réecrivais ma balise script avec les nouveaux élements en drag mais apres une premiere requete,je ne pouvais plus déplacer mes fichiers.

Solution :

Code :

1
2
3
var codejs = routine qui génère ton code javascript;
var ScriptObject = document.getElementById(tonIdDeLaBaliseScript);
ScriptObject.innerHTML = eval(codejs);

La fonction eval est destinée a interpréter n'importe quelle chaine de caractères comme un code javascript...