Dojo extension dojo.dnd.Source, ne bouge pas. Des idées?

AVIS: CECI EST RÉSOLU, JE PUBLIEZ LA SOLUTION ICI DANS MOINS.

Salut à tous,

Ok … J'ai une simple page dojo avec les éléments essentiels. Trois UL avec quelques LI's en eux. L'idée est de permettre de faire glisser-déposer entre eux, mais si un UL est vide en raison du dernier élément à trahir, je vais envoyer un message à l'utilisateur pour lui donner quelques instructions.

Pour ce faire, je voulais étendre le dojo.dnd.Source dijit et ajouter de l'intelligence. Il semblait assez facile. Pour garder les choses simples (je charge le Dojo à partir d'un CDN), je déclare simplement mon extension, par opposition à la totalité de la charge du module. La fonction de déclaration est ici …

function declare_mockupSmartDndUl(){ dojo.require("dojo.dnd.Source"); dojo.provide("mockup.SmartDndUl"); dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { markupFactory: function(params, node){ //params._skipStartup = true; return new mockup.SmartDndUl(node, params); }, onDndDrop: function(source, nodes, copy){ console.debug('onDndDrop!'); if(this == source){ // reordering items console.debug('moving items from us'); // DO SOMETHING HERE }else{ // moving items to us console.debug('moving items to us'); // DO SOMETHING HERE } console.debug('this = ' + this ); console.debug('source = ' + source ); console.debug('nodes = ' + nodes); console.debug('copy = ' + copy); return dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy); } }); }

J'ai une fonction init pour l'utiliser pour décorer les listes …

 dojo.addOnLoad(function(){ declare_mockupSmartDndUl(); if(dojo.byId('list1')){ //new mockup.SmartDndUl(dojo.byId('list1')); new dojo.dnd.Source(dojo.byId('list1')); } if(dojo.byId('list2')){ new mockup.SmartDndUl(dojo.byId('list2')); //new dojo.dnd.Source(dojo.byId('list2')); } if(dojo.byId('list3')){ new mockup.SmartDndUl(dojo.byId('list3')); //new dojo.dnd.Source(dojo.byId('list3')); } });

Il va bien dans la mesure du possible, vous remarquerez que j'ai laissé "list1" comme une source standard dojo dnd pour les tests.

Le problème est le suivant: la liste1 acceptera les articles des listes 2 et 3 qui se déplaceront ou copieront comme apprenti. Cependant, les listes 2 et 3 refusent d'accepter les éléments de la liste1. C'est comme si l'opération du MDN était annulée, mais le débogueur affiche le dojo.dnd.Source.prototype.onDndDrop.call qui se passe, et les paramatures me semblent bien.

Maintenant, la documentation ici est vraiment faible, donc l'exemple dans lequel j'ai pris une partie peut être dépassé (j'utilise 1,4).

Est-ce que quelqu'un peut m'inviter sur ce qui pourrait être le problème avec mon extension dijit?

Merci!

Si vous utilisez Dojo XD loader (utilisé avec les CDN), tous les dojo.require() sont asynchrones. Pourtant, declare_mockupSmartDndUl() suppose que dès qu'il nécessite dojo.dnd.Source il est disponible. Généralement, il n'est pas garanti.

Un autre nitpicking: dojo.dnd.Source n'est pas un widget / dijit, alors qu'il est scriptable et peut être utilisé avec le Dojo Markup, il n'implémente pas les interfaces de Dijit.

Maintenant, le problème – la méthode que vous supprimez a la définition suivante en 1.4:

 onDndDrop: function(source, nodes, copy, target){ // summary: // topic event processor for /dnd/drop, called to finish the DnD operation // source: Object // the source which provides items // nodes: Array // the list of transferred items // copy: Boolean // copy items, if true, move items otherwise // target: Object // the target which accepts items if(this == target){ // this one is for us => move nodes! this.onDrop(source, nodes, copy); } this.onDndCancel(); },

Notez qu'il a 4 arguments, pas 3. Comme vous pouvez voir si vous ne passez pas le 4ème argument, onDrop ne sera jamais appelé par la méthode parent.

Réparez ces deux problèmes et, très probablement, vous obtiendrez ce que vous voulez.

En fin de compte, j'ai frappé le Dojo IRC (excellents amis!) Et nous avons fini (jusqu'à présent) avec ça …

  function declare_mockupSmartDndUl(){ dojo.require("dojo.dnd.Source"); dojo.provide("mockup.SmartDndUl"); dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, { markupFactory: function(params, node){ //params._skipStartup = true; return new mockup.SmartDndUl(node, params); }, onDropExternal: function(source, nodes, copy){ console.debug('onDropExternal called...'); // dojo.destroy(this.getAllNodes().query(".dndInstructions")); this.inherited(arguments); var x = source.getAllNodes().length; if( x == 0 ){ newnode = document.createElement('li'); newnode.innerHTML = "You can drag stuff here!"; dojo.addClass(newnode,"dndInstructions"); source.node.appendChild(newnode); } return true; // return dojo.dnd.Source.prototype.onDropExternal.call(this, source, nodes, copy); } }); }

Et vous pouvez voir où je me dirige, je mets un message lorsque la source est vide (spécifications du client, ug!) Et je dois trouver un moyen de le tuer quand quelque chose se traîne (car ce n'est pas par définition, Vide plus sur une traînée incompatible!). Cette partie ne fonctionne pas si bien.

Quoi qu'il en soit, la magie n'était pas d'utiliser les fonctions onDnd_____, mais le niveau supérieur, puis appeler ce.inherited (arguments) pour déclencher la fonctionnalité intégrée.

Merci!

 dojo.require("dojo.dnd.Source"); dojo.provide("mockup.SmartDndUl"); dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, {

Dojo exige une déclaration et déclarer la déclaration est à côté de la suivante. Je pense que cela causera des problèmes de dépendances.

La déclaration de dojo exige que l'on ne dépasse pas le bloc de surcharge et que l'instruction declarer soit dans le bloc de chargement.