création d'un widget déplaçable [Résolu]

[skerdreux]

Bonjour,

je souhaite créer un widget simple :

Bandeau titre + bouton de fermeture et une partie contenue où je pourrais rajouter toutes sortes d'objet.

Pour l'instant j'arrive à créer mon widget mais je n'arrive pas à le rendre déplaçable via seulement un click sur la partie titre. (tout le widget est déplaçable).

mon code :

Code :

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
 
function moveableWidget(identifiant,titre){
	// handle
	var widget = document.createElement("div");
	widget.id = identifiant+"_widget";
	widget.className = "widget";		
 
	// create and add title part
	var titleContainer = new dijit.layout.ContentPane({id: identifiant+"_title"});
	widget.appendChild(titleContainer.domNode);
 
	// titre
	var divTitre = document.createElement("div");
	var titreNode = document.createTextNode(titre);
	divTitre.setAttribute("class","labelTitle");
	divTitre.appendChild(titreNode);
	(titleContainer.domNode).appendChild(divTitre);	
 
	// bouton close
	var closeButton = new dijit.form.Button({label: "X", onClick: function() {console.log("Thank you! ");}});
	var divButton = document.createElement("div");
	divButton.setAttribute("class","buttonClose");
	divButton.appendChild(closeButton.domNode);
	(titleContainer.domNode).appendChild(divButton);
 
	// content
	var centerPane  = document.createElement("div");
	centerPane.setAttribute("style","padding:10px;");	
	centerPane.id = identifiant;
	widget.appendChild(centerPane);
 
	// make movable
	var dnd = new dojo.dnd.Moveable(widget);
 
	return widget;
}

et je l'utilise comme cela :

Code :

1
2
3
 
widgetLocate = moveableWidget(identifiant,"Locate");	
dojo.byId("widgets").appendChild(widgetLocate);

ma question est donc : comment rendre mon widget déplaçable en cliquant seulement que sur la partie titre.
J'ai un peu près tout essayer mais là je n'ai plus d'idée.

[Le Roux B.]

toutes mes excuses mais je n'ai pas trop le temps de regarder ton exemple.
Il y a un exemple similaire http://archive.dojotoolkit.org/night..._moveable.html

si cela peut t'aider

[Daniel_Gibot]

Bonjour,

Désolé de répondre tardivement également.

Ce que vous décrivez me fait penser à l'objet dijit.dialog. Une fenetre, avec un bandeau titre et un bouton close, dans laquelle on peut ajouter les objets que l'on souhaite.

http://docs.dojocampus.org/dijit/Dia...jit\.dialog%29

[Le Roux B.]

J'ai essayé le code; il fonctionne bien si on ajoute

Code :

1
2
3
4
5
 
identifiant ="";
require("dojo.dnd.move");
require("dijit.layout.Contentpane");
require("dijit.form.Button");

[skerdreux]

en fait je me suis mal exprimé dans mon premier post.

J'arrive à rendre mon widget déplaçable mais je voudrais limiter la capacité de déplacement en ne pouvant cliquer que sur le bandeau et donc de désactiver la capacité de déplacement quand on clique dans le contenu du widget (par exemple si on veut sélectionner un texte ou faire défiler une scrollbar).

et ça pour l'instant je n'y arrive strictement pas.

[Daniel_Gibot]

Bonjour,

L'exemple fourni par B. explique comment faire.

Code :

m1 = new dojo.dnd.Moveable("moveable1", {handle: "handle1"});

"handle" permet de définir la zone qui "permet" le drag n' drop.
Pour vous donc ce serait "divTitre", il faut lui donner un "id" par contre.

Toutefois je persiste avec le dijit.Dialog. Inutile de réinventer ce qui existe déjà.

[skerdreux]

Au temps pour moi, je pensais avoir fait le tour des widgets et je m'étonnais justement de ne pas trouver un tel widget.
J'avais bien vu un widget dialog qui permettait de rajouter des éléments et d'être réduit mais qui n'était pas déplaçable.

En tout cas merci à tous pour vos réponses.