Recherché: Directions/idées pour une implémentation drag'n'drop d'arbre à arbre personnalisée dans ExtJS

Question

J'ai besoin de fonctionnalités combinées concernant drag'n'drop entre deux arbres dans ExtJS.

La première fonction requise est très simple et est seulement les caractéristiques BUILTIN de drag'n'drop isolés à un seul arbre seulement.

La deuxième fonction est nécessaire que je wan't l'utilisateur de pouvoir faire glisser un nœud de l'arbre gauche et déposez-le à tout noeud dans l'arbre droit.

L'action ne doit pas supprimer le nœud de l'arbre gauche, créant ainsi la possibilité de faire glisser le même nœud de l'arbre gauche à plusieurs endroits dans le arbre droit.

Ma question est: Quelle approche dois-je prendre pour combiner ces deux fonctionnalités, en utilisant les possibilités existantes dans l'objet TreePanel sans inventer la roue à nouveau? Je ne cherche pas une solution complète (ce serait bien quand même ;-)), mais plutôt comment gérer les drag/drop-zones, les événements et ainsi de suite.

Answer 1

OK. J'ai pensé à ce quelque temps, et l'approche suivante semble fonctionner pour moi :)

J'ai configuré le gauche arbre comme ceci:

listeners: 
{ 
    beforenodedrop: function (dropEvent) { 
     // Does this node come from the right tree? 
     if (dropEvent.source.tree.id !== dropEvent.tree.id) { 
      // The node should be discarded. 
      dropEvent.dropNode.parentNode.removeChild(dropEvent.dropNode, true); 

      // The node has been discarded, return drop succeeded. 
      dropEvent.dropStatus = true; 
      return false; 
     } 
     return true; 
    }, 
    nodedragover: function (dragevent) { 
     // If the node comes from the right tree, it is allowed to be dropped here. 
     if (dragevent.source.tree.id !== dragevent.tree.id) { 
      return true; 
     } 
     // A node from this tree is not allowed to be dropped. 
     return false; 
    } 
} 

Le droit arbre est configuré comme ceci:

listeners: 
{ 
    beforenodedrop: function (dropEvent) { 
     // Does this node come from the left tree? 
     if (dropEvent.source.tree.id !== dropEvent.tree.id) { 
      // The node should be cloned and inserted in the right tree. 

      // Copy the node. 
      var node = dropEvent.dropNode; // the node that was dropped 
      var nodeCopy = new Ext.tree.TreeNode(// copy it 
       Ext.apply({}, node.attributes) 
      ); 
      // Match the id's. 
      nodeCopy.id = Ext.id(null,'newnode') + '_' + node.id; 

      // Find the right place to put it. 
      if (dropEvent.target.parentNode === dropEvent.tree.getRootNode()) { 
       // The node is placed on a folder, thus drop it there. 
       dropEvent.target.appendChild(nodeCopy); 
      } else { 
       // The node is placed inside a folder, thus place it in there. 
       dropEvent.target.parentNode.appendChild(nodeCopy); 
      } 

      // The node has been dropped, return okay and stop further process. 
      dropEvent.dropStatus = true; 
      return false; 
     }   
     // Just use the normal builtin drag and drop. 
     return true; 
    } 
} 

deux arbres a été mis pour permettre Drag'n'Drop:

enableDD: true 

Tous les nœuds feuilles ont la configuration suivante:

allowDrop: true, 
draggable: true 

Tous les dossiers sont réglés sur:

allowDrop: true, 
draggable: false 

La conclusion est que je l'ai choisi pour remplacer une partie de la drag'n builtin » déposer des méthodes dans le treepanel tout en conservant la fonctionnalité intégrée.