dnd d'un div vers un tree

**sedik.h** · 08/03/2010, 18h34

Salut tout le monde,
J'ai un dijit.Tree que je lui ai affecté un dnd.Source en fonction du Javascript pour que les éléments de ce Tree soient drag-and-droppables.
Voici mon code:

Code html :

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
<div dojoType="dojo.data.ItemFileWriteStore"
  data='<?php echo htmlentities($this->donneeTree, ENT_QUOTES) ?> '
  jsid="treeStore">
  </div>
  <div dojoType="dijit.tree.ForestStoreModel" jsid="treeModel" store="treeStore"
  query="{IDAttribut:'*'}" rootId="root" rootLabel="root">
  </div>
  <div dojoType="dijit.Tree"
  id="tree"
  model="treeModel"
  jsid="ptTree"
  dragThreshold="10"
  showRoot="false"
  onFocus="affecterDnd"
  >
  </div>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function affecterDnd(){
    listTreeDnd = new dijit.tree.dndSource(dijit.byId("tree"),
    {
        id: "listTree",
        copyOnly: "true",
        checkItemAcceptance: function(target, source) {
            return false;
        },
        checkAcceptance: function(target, source) {
            return false;
        }
    });
}

Quand je drag-and-drop les éléments de ce tree vers un div(qui est lui même un dnd.Source), ça marche parfaitement, mais le problème est que je n'arrive pas à faire l'inverse, c'est à dire du div vers le tree.
j'ai essayé de mettre un creator hint mais ça marche pas, voici le code de l'affectation de dnd.Source au tree avec le creator:

Code javascript :

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
 
        listTreeDnd = new dijit.tree.dndSource(dijit.byId("tree"),
        {
            id: "listTree",
            copyOnly: "true",
            checkItemAcceptance: function(target, source) {
                return true;
            },
            checkAcceptance: function(target, source) {
                return true;
            },
            creator: function(item, hint) {
                p = dojo.create("p",{innerHTML:""});
                return {node: p};
            }
        });

Ce code me génère cette erreur quand je commence le drag à partir du tree:

source._normalizedCreator is not a function
[Break on this error] (517 out of range 516)

NB: Version dojo 1.4

Si vous avez une idée, je serai très reconnaissant.
peace.

**Daniel_Gibot** · 10/03/2010, 08h59

Bonjour,

Je ne connais pas trop les drag n drop mais si j'ai bien compris, vous voulez envoyer un noeud du tree vers un div et du div vers le tree. Sachant que vous faites un "copyonly" est-il vraiment nécessaire de le faire dans l'autre sens étant donné que le noeud est toujours existant dans le tree.
Si c'est bien le cas pourriez-vous fournir un script viable afin que je puisse faire des essais ?

Ca me formera et je pourrais essayer de trouver une solution viable

**sedik.h** · 10/03/2010, 11h41

Bonjour Daniel et merci pour l'intérêt que tu as donné à ma question,

-Ce que j'ai déjà fait: Glisser un élément à partir du tree vers un div, on va pas enlever cet élément du tree mais plutôt on le grise.
-Ce que je n'ai pas fait: Réaliser le dnd en sens inverse, c'est à dire en glissant un élément à partir d'un div vers le tree, en sachant que l'élément droppé ne doit pas être insérer puisque il est déjà dans le tree, mais plutôt on va enlever son grisage dans le tree.

J'ai ajouté 2 fichiers joints pour te montrer où suis-je arriver jusque là.

NB: Pour que mon exemple marche sur ton poste tu devra mettre les 2 fichiers joints dans le même dossier, et renommer 'countries.txt' en 'countries.json'
NB2: Je travail avec la version 1.4 de dojo

J'espère que j'étaie assez clair, et merci encore une fois.

**Daniel_Gibot** · 10/03/2010, 14h38

Après quelques tentatives, je suis arrivé à désactiver le noeud déplacé dans le <div> et le réactiver quand on l'y renvoie.
Voici le script lancé au dojo.addOnLoad et ma fonction de création du tree Dnd :

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
 
<script type="text/javascript">
	dojo.addOnLoad(function(){
	//Affecter le dndSource a 'contenant'
	var listItemsList = new dojo.dnd.Source(dojo.byId("contenant"),{
		id:'contenant',
		skipForm:"true",
		checkItemAcceptance: function(target, source) {
			return true;
		},
		checkAcceptance: function(target, source) {
			return true;
		}
	});
	//Evenement qui se declenche au moment du drop d'un element
	dojo.subscribe("/dnd/drop", function(source, nodes, copy,  target){
		//Recuperer le style de l'element glisse, et lui ajouter l'attribut 'color:grey;'
		if(target.id == "contenant"){
                        //Pour changer la couleur
                        //source.anchor.style.color = 'gray';
			source.anchor.disabled = true;
		}
		if(source.id == "contenant" && target.id != "contenant"){
                        //Pour changer la couleur
                        //source.anchor.style.color = 'black';
			target.anchor.disabled = false;
		}
	});
});
function affecterDnd(){
	listTreeDnd = new dijit.tree.dndSource(dijit.byId("tree"),
	{
		id: "listTree",
		copyOnly: "true",
		selfAccept:"true",
		checkItemAcceptance: function(target, source) {				
			return true;
		},
		checkAcceptance: function(target, source) {
			return true;
		}
	});
}
</script>

L'id "contenant" correspond au "div1" de votre fichier html.
Toutefois, lorsque l'on DragnDrop du div vers le tree, la ligne "droppée" ne disparait pas du div.
Toutefois, je rencontre un soucis lors de l'envoi du div vers le tree. En effet, le div (que j'ai encadré de noir) "mange" le node que l'on retourne

Pour le moment, je ne vois pas comment faire. Je ne sais pas si on peut arrêter un drop en cours.

**emmanuel.remy** · 12/03/2010, 09h39

Salut,

Je ne vais pas donner une solution toute faite car il faut se pencher sur le code Dojo, mais il y aurait beaucoup à écrire sur les dnd de Dojo et notamment avec les Tree...

Dojo gère les dnd du Tree différemment des autres éléments. C'est pour cela qu'il y a dijit.tree.dndSource pour le Tree et dojo.dnd.Source pour le reste du monde.
Dans le cas d'un dnd tree->div, cela ne pose pas TROP de soucis car lors du drop on peut prendre le contenu déplacé pour l'ajouter à la div (et encore il vaut mieux le COPIER que le DEPLACER). Par contre dans le cas div -> tree il faut pouvoir AJOUTER au tree le contenu déplacé, en pensant bien que ce contenu doit être ajouté par le Tree au store sous-jacent... (note: c'est une des raisons de la présence/utilité de dijit.tree.dndSource)

En bref une partie de rigolade.

ERE