Forums : Xul, Xbl, JS...

Salut mcben,

que veux-tu faire exactement ? car si tu t'es inspiré de mon exemple de code, les cellules réagissent déja. Peux-tu détailler un peu ta demande ?

Fabrice

Salut Fabrice,

Disons que ton exemple, et le code source du Bookmark Manager de Firefox, m'ont permis de mieux comprendre la mise en place du drag and drop entre deux arbres.

Par contre, lorsque je drag un objet, aucune interaction sur l'apparence de l'arbre n'apparaît, alors que je peux dropper l'objet.

Ma question était donc si les effets du Drag And Drop (changement de couleur, petit trait au dessus ou au dessous de ma zone de drop, etc..) étaient activés par défaut.

Pour l'instant, je suis obligé de faire des bidouilles en utilisant l'attribut properties et une CSS qui va bien sur mes treerow pour que j'obtienne l'effet Drag and Drop. Mais je n'ai pas encore la gestion des orientations. J'ai repris la technique du Bookmark Manager qui utilise des attributs personnalisés notamment pour l'orientation du drop, et les petits traits en dessous et au dessus.

Pour résumer, comment bien gérer l'apparence (et le positionnement) de ces éléments lorsqu'on fait du drag and drop entre deux Tree ?

Pour info, j'utilise deux arbres avec des datasources RDF. J'aurai d'ailleurs d'autres questions à ce sujet, notamment concernant le filtrage et le regroupement de données, mais ce sera pour une prochaine fois ;-)

mcben si tu regarde bien mon code tu veras que ce que tu cherches a faire y est !!

voici l'extrait en question :

// Observateur pour le destinataire (ondragover="nsDragAndDrop.dragOver(event,nomenclatureClapObserver)")
var nomenclatureClapObserver = {
 getSupportedFlavours : function () {
    var flavours = new FlavourSet();
    flavours.appendFlavour("text/unicode");
    return flavours;
  },
  onDragOver: function (evt,flavour,session){

  // c'est juste pour avoir une réaction de l'interface lors du survole
  // on récupere l'index de la ligne du tree survolé
  var clapTree = GetNomenclatureClapTree();
  var row = {};
  var col = {};
  var elt = {};
  clapTree.treeBoxObject.getCellAt(evt.clientX, evt.clientY, row, col, elt);

    if (row.value == -1)
      return false;

  // on selectionne la ligne dont l'index à été récupéré plus haut
  clapTree.view.selection.select(row.value);

  },

};

il ne faut pas oubier le ondragover="nsDragAndDrop.dragOver(event,nomenclatureClapObserver)" sur le tree destinataire pour que cela fonctionne, mais normalement tout est là ;) Chaque ligne survolée sera selectionnée donc changera de couleur. Couleur que tu peux modifier via CSS.

Fabrice

Ok, je crois que je l'avais enlevé parce que ça ne marchait pas comme je voulais sur mon arbre...

Effectivement, ça peut marcher comme ça, mais je trouve que ça fait un peu bidouille. Pour info, je fais mon effet de dragOver comme celà :

DropObserver.prototype.onDragOver = function(pEvent, pFlavour, pSession)
{
	
	// on récupère notre arbre
	var treeItem = pEvent.target.parentNode;
	var row = {};
	var col = {};
	var elt = {};
	
	// on récupère la zone de l'arbre qui est survolée par la souris
	treeItem.treeBoxObject.getCellAt(pEvent.clientX, pEvent.clientY, row, col, elt);
	
	if (row.value == -1)
		return false;
	
	// on récupère le firstChild (un treerow) de l'élement correspondant (un treechildren)
	var currentItem = treeItem.contentView.getItemAtIndex(row.value).firstChild;
	currentItem.id = currentItem.parentNode.id;
	
	if(this.mItemHovered.id == undefined)
	{
		this.mItemHovered = currentItem;
	}
	
	// on compare. S'ils sont différents, c'est que la zone s'est déplacé: j'enlève l'effet sur le précédent
	if( currentItem.id != this.mItemHovered.id )
	{
		if(this.mItemHovered.id != undefined)
		{
			this.mItemHovered.removeAttribute('properties');
		}
		this.mItemHovered = currentItem;
	}
	// on ajoute l'effet sur le nouveau
	this.mItemHovered.setAttribute('properties', 'hover');
	
       pSession.canDrop = true;
}

Ça marche plutôt pas mal pour l'instant, mais je me demandais s'il y avait des techniques plus adaptées pour faire ça.

En outre, pour l'instant, je ne sais pas encore géré l'orientation du dragOver, et donc mettre des petits traits en dessous et au dessus des éléments autour desquels je peux insérer mon élément en cours de drop.

Des idées ?