Drag and Drop d'onglets dans tabcontainer

Version imprimable

dojo.version 1.4
Bonjour tous le monde ,
je voudrais faire drag and drop entre les onglets et aussi dnd entre le contenu des onglet j'ai essai d'utiliser dojox.layout.GridContainer a l'interieur de dijit.layout.TabContainer
pour pouvoir fait dnd de toutes les balises qui sont a l'interieur de dojox.layout.GridContainer entre eux mais malheursement ca marche pas dnd et il m'affiche pas les onglets qui sont crees voila mon code si vous avez une idee pour le corriger ou si vous avez autre proposition pour faire ca je voudrais faire comme les envennement qui sont sur le site
www.netvibes.com par frameWork Dojo
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;"> <div id="GC1" dojoType="dojox.layout.GridContainer" nbZones="3" opacity="0.7" acceptTypes="dijit.layout.ContentPane"> <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> Lorem ipsum and all around... </div> <div dojoType="dijit.layout.ContentPane" title="My second tab"> Lorem ipsum and all around - second... </div> <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true"> Lorem ipsum and all around - last... </div> </div> </div>

meme chose j'ai essai de les creer par js mais aussi il m'affiche rien protant dans le code source existe

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
 
   var monGrid = new dojox.layout.GridContainer(
            {
                nbZones: 1,
                opacity:0.7,
                allowAutoScroll:true
            },
            dojo.byId('monGrid')
        );
 
    var contentPane = new dijit.layout.ContentPane({}, dojo.byId('contentPane'));
    monGrid.addService(contentPane, 0, 1);
 
    var tc = new dijit.layout.TabContainer({
        //style: "height: 100%; width: 100%;",
        id:"tab1"
    },
    dojo.byId('contentPane'));
 
   var cp1 = new dijit.layout.ContentPane({
        title: "Food",
        id:"pane1",
        content: "We offer amazing food"
    });
    tc.addChild(cp1);
 
    tc.startup();
 
    monGrid.startup();

je voudrais savoir est qu'il ya un conflit entre tabContainer et gridContainer
merci pour votre reponse

23/12/2009, 13h10
emmanuel.remy

Salut,

J'ai un peu regardé et il ne semble pas exister de possibilité en standard pour faire du drag and drop d'onglets. :(

C'est vrai que ce serait une belle fonctionnalité. 8-)

ERE
23/12/2009, 18h32
laminfodev

merci emmanuel.remy pour votre reponse
je voudrais savoir je ne peux pas faire cette fonctionnalite par dojo ???????
vous avez pas une idee?
25/12/2009, 11h50
emmanuel.remy
Salut,

Impossible n'est pas français :france:

Plus sérieusement on peut imaginer de gérer le dnd des onglets et ensuite d'intervertir les contentpane relatifs.
Il faudrait déjà:
1. tester l'échange de deux contentpane du container
2. tester l'échange de deux onglets (peut-être en changeant simplement leur libellé)
3. gérer le dnd
Suis prêt à t'aider pour tester ton code et debugguer si tu veux.

Bon courage,

ERE

dnd onglet

merci beaucoup emmanuel.remy ;
j'ai essai d'integrer le code de drag and drop pour drager les contantPane ca marche juste dnd mais le probleme c'est que les onglets sont disparu , convertie a des div de typeDojo contentPane normal sans des onglets
voila mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
    <div dojoType="dojo.dnd.Source" jsId="c3" class="dndContainer">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" class="dojoDndItem" >
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab" class="dojoDndItem" >
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" class="dojoDndItem" >
            Lorem ipsum and all around - last...
        </div>     
      </div>  
    </div>
 
</div>

merci d'avance

28/12/2009, 19h29
emmanuel.remy

Salut,

Tu peux poster le code complet de la page stp ? Ce sera plus simple pour tester de mon côté.

ERE

merci emmanuel.remy;
voila le code source complet

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
 
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>
 
    <body class="tundra ">
        <div style="width: 350px; height: 300px">
            <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
            <div dojoType="dojo.dnd.Source" jsId="c3">
                <div dojoType="dijit.layout.ContentPane" title="My first tab" class="dojoDndItem">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My second tab" class="dojoDndItem">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My last tab" class="dojoDndItem">
                    Lorem ipsum and all around - last...
                </div>
              </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
 
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");
      //drag and drop 
        dojo.require("dojo.dnd.Container");
        dojo.require("dojo.dnd.Manager");
        dojo.require("dojo.dnd.Source");
    </script>
    <!-- NOTE: the following script tag is not intended for usage in real
    world!! it is part of the CodeGlass and you should just remove it when
    you use the code -->
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (window.pub) {
                window.pub();
            }
        });
    </script>
 
</html>