Dnd d'un arbre vers un container

**gdorchie** · 29/01/2010, 18h06

Bonjour,

Je travail sur le drag and drop de feuille d'un arbre vers un container (un simple dojo.dnd.source).

Le drag and drop fonctionne tres bien mais j'obtiens dans mon container, un div ayant le même visuel que celui dans l'arbre (donc avec les icones genre la barre etc ...)

Je pensais supprimer le div issu du drag and drop et le remplacer par un item construit automatiquement mais je n'arrive pas à utiliser la fonction delItem de dojo.dnd.Source.

le code que j'essaye de stabiliser :

Code :

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

1
2
3
4
5
6
7
	dojo.connect(shopping_list_items_list, "onDndDrop", function(source, nodes, copy, target){
		if (target==shopping_list_items_list) {
		    nodes.forEach(function(node){
			    shopping_list_items_list.delItem(node.id);
			});
		}
	    });

J'ai regardé dans la map du dojo.dnd.source mais je n'arrive pas à trouver un objet qui pourrais correspondre.

Est ce que quelqu'un aurais un début de piste, je suis perdu

D'avance merci

Guillaume

**emmanuel.remy** · 29/01/2010, 21h23

Salut,

Il manque ta version de Dojo. Car entre la 1.1, 1.2 et 1.4 les drag and drop ont pas mal bougé.

Si j'ai bien compris, tu fais un dnd depuis un item de l'arbre (une "feuille") vers une DIV, et tu souhaiterais que ce ne soit pas la représentation de la "feuille" qui apparaisse dans la div cible mais un rendu perso.

A priori ton DnD fonctionne, ce qui me laisse admiratif

. Fais tu une copie ou un déplacement ?

Peux tu passer ton code pour faire un test ? Sinon selon ta version de dojo il faut créer une fonction dite "fonction creator" qui est affectée au "creator" de ton objet DnD source.

ERE

**gdorchie** · 29/01/2010, 22h00

J'utilise la version 1.4.1 de dojo

Mon arbre est en copie, j'ai mis cela dans la definition du dnd source associé à mon arbre copyOnly: "true"

Ci dessous le code, le but est de faire un application de gestion de liste de course pour ma femme et moi avec un rendu sur telephone portable apres ;-)

Le code JS

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
dojo.require("dojo.dnd.common");
dojo.require("dojo.dnd.Source");
dojo.require("dojox.rpc.JsonRest");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dijit.tree.dndSource");
 
var shopping_list_store=null;
var shopping_list_items_list=null;
var shopping_list_store=null;
var shopping_list_tree_model=null;
var shopping_list_tree=null;
var shopping_list_tree_dnd =null;
 
dojo.addOnLoad(function(){
 
	shopping_list_store = new dojo.data.ItemFileReadStore({
		data: jsonData
	    });
 
	shopping_list_tree_model = new dijit.tree.ForestStoreModel({
		store: shopping_list_store,
		query: {
		    "type": "category"
		},
		rootId: "root",
		childrenAttrs: ["children"]
	    });
 
	shopping_list_tree=new dijit.Tree({
		model: shopping_list_tree_model,
		showRoot: false,
		dragThreshold: 8 //Nombre de pixel avant de considerer que c'est un drag and drop
	    }, "shopping_list_tree");
 
	shopping_list_tree_dnd = new dijit.tree.dndSource(shopping_list_tree,	 
							  {id: "shopping_list_tree",
							   copyOnly: "true",
							   checkItemAcceptance: function(target, source) {
								  return false;
							      },
							   checkAcceptance: function(target, source) {
								  return false;
							      }						       
							  });
 
	shopping_list_items_list = new dojo.dnd.Source("shopping_list_items_list",{
		selfAccept: "false",
		checkItemAcceptance: function(target, source) {
		    console.log("Check acceptance ",source);
		    return true;
		},
		checkAcceptance: function(target, source) {
		    return true;
		}
	    });
 
	dojo.connect(shopping_list_items_list, "onDndDrop", function(source, nodes, copy, target){
		if (target==shopping_list_items_list) {
		    var obj=target.current;
		    console.log("current ",obj);
		    //delItem(mettre la clé de l'item)
		    nodes.forEach(function(node){
			    shopping_list_items_list.delItem(node.id);
			});
		}
	    });
 
 
    });

Le code HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
<div style="height:100%;widht:100%;">
  <div class="shopping_list_column">
    <div id="shopping_list_tree" class="container" style="height:100%;">
    </div>
  </div>
  <div class="shopping_list_column">
    <div id="shopping_list_items_list" class="container" style="height:100%;">
    </div>
  </div>
</div>

Merci beaucoup pour ton aide

Guillaume

**emmanuel.remy** · 30/01/2010, 01h31

Re,

J'adore ton

Code :

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

1
2
3
4
 
checkAcceptance: function(target, source) {
	    return true;
}

Cela a le mérite de la brièveté et simplifie l'utilisation de l'attribut accept

Ton souci provient de ce que je t'écrivais précédemment: quand tu fais le drop, dojo doit copier l'élément précédent. Or il va le faire selon le type de la source (un div donne une div, une ul donne un li, etc...). Pour s'affranchir de ça, il faut redéfinir la fonction "creator". C'est cette fonction qui est appelée pour créer le DOM lié au drop ou qui crée l'avatar au moment du drag... Dans ton cas cela pourrait donner quelque chose comme:

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
 
 
shopping_list_items_list = new dojo.dnd.Source("shopping_list_items_list",{
		selfAccept: "false",
		checkItemAcceptance: function(target, source) {
		    console.log("Check acceptance ",source);
		    return true;
		},
		checkAcceptance: function(target, source) {
		    return true;
		},
 
      creator: function(item, hint) {
        var texte;
        if (hint!= "avatar") {
          //XXXXXXX l'attribut de l'item du store qu'on souhaite afficher
          texte =  shopping_list_store.getValue(item.item, "XXXXXXX") ;       
        }
        else {
          //en cas de déplacement d'un élément de cette source
          //note: en cas de copie, il faudrait gérer plus précisément le type de donnée de item
          texte= "Avatar dédié: " + item;
        }
        //créons un paragraphe plutôt que le div du treeNode
        var p = dojo.create("p",{innerHTML: texte});
        //un petit coup de rouge (hips) pour s'assurer qu'on ne triche pas !
        dojo.style(p, {color:"red"});
        //et on renvoie notre noeud et le type de données associée
        return {node: p, data: texte, type: ["Text"]};
      }
	});

Je viens de faire un essai rapide et cela fonctionne bien, mais faudra peut-être que tu ajustes car le vendredi soir je ne suis plus trop étanche !

Pour info, dans ce cas l'erreur à ne pas faire c'est de remplacer le onDndDrop (je sais ,tu as fait un connect

, mais c'est juste pour info), car alors on rend le dnd instable, faute de mise à jour des variables qu'il gère.

ERE

**gdorchie** · 01/02/2010, 13h16

Merci beaucoup cela marche super bien

**gdorchie** · 01/02/2010, 16h34

Et zut nouveau problème sur le même sous ensemble.

Ma fonction creator est maintenant celle ci

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
creator: function(item, hint) {
   var texte;
   var dndNode;
		    if (hint!= "avatar") {
			shopping_list_tree.focusNode(item);
			texte =  shopping_list_store.getValue(item.item, 'name') ;
		    }
		    else {
			//en cas de déplacement d'un élément de cette source
			//note: en cas de copie, il faudrait plus précisément le type de donnée de item
			//CAS NON Traité pour le moment
			texte= "Avatar dédié: " + item;
		    }
		    dndNode= dojo.create("div",{thing_uuid: shopping_list_store.getValue(item.item, 'id'),					       
						innerHTML: texte});
		    dojo.addClass(dndNode, "dojoDndItem");
		    return {node: dndNode, data: texte, type: ["Text"]};
		}

Lorsque je construit le div je lui affecte un attribut thing_uuid qui est l'identifiant unique de l'objet coté serveur, ce thig_uuid se trouve dans les item du model.

puis je fait mon connect sur onDndDrop de la sorte

Code :

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

1
2
3
4
5
6
 
dojo.connect(shopping_list_items_list, "onDndDrop", function(source, nodes, copy, target){
		if (target==shopping_list_items_list) {
[Code a Trouver]
		}
	    });

à la place de [Code à trouver] j'aimerais bien mettre un code qui à partir des élements du tableau nodes arrive à remonter dans le model du tree pour retrouver les items et donc mes thing_uuid. Dans nodes, les éléments pointent vers les div de l'arbre et je n'arrive pas à trouver la fonction qui fait la correspondance entre les div de l'arbre et les items du model.

Pour le moment la seule solution que j'ai trouvé est de forcer le focus sur l'objet que je suis entrain de drag and dropper (oui oui on peut faire un dnd sans donner le focus...) et dans mon connect je met ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
 
dojo.connect(shopping_list_items_list, "onDndDrop", function(source, nodes, copy, target){
		if (target==shopping_list_items_list) {
		    console.log("la ",source," truc ",shopping_list_tree);
		    if (source==shopping_list_tree_dnd) {
			var item1=shopping_list_tree.lastFocused.item;
			console.log("item1=",item1.id);
		    }
		}
	    });