1. Accueil
  2. Forum Codes-Sources
  3. ASP / ASP.NET
  4. ASP.NET
Sujet Précédent Sujet Suivant

DragDropList avec le framework ASP.NET AJAX

Résolu
abdelilahw3
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
 - 12 mars 2007 à 12:07
abdelilahw3
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
 - 3 avril 2007 à 16:59
Bonjour à tous,

J'ai trouvé un bon exemple de DragDropList avec l'ancienne version de asp.net Ajax "atlas" (http://aspadvice.com/blogs/garbin/archive/2006/01/17/14730.aspx),mais je veux une solution avec asp.net Ajax .

je veux un resultat comme ce lui  de :  http://www.netvibes.com/

Avez vous des idées?

3 réponses

Réponse 1 / 3
abdelilahw3
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
3 avril 2007 à 16:59
Bonjour,

le code suivant permet le drag and drop en utilisant  la dernière version de atlas .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Widgets UI Example</title>
    <style type="text/css">
        body {
           font-family:Verdana;
           font-size:11px;
        }
        .main {
           position:relative;
           width:710px;
           height:540px;
           margin:auto;
        }
        .list1 {
           position:absolute;
           left:0px;
           height:520px;
           width:340px;
           padding:10px 5px 10px 10px;
        }
        .list2 {
           position:absolute;
           right:0px;
           height:520px;
           width:340px;
           padding:10px 10px 10px 5px;
        }
        .item {
           background:#fff;
           margin-bottom:5px;
           background:#fff;
        }
        .itemContent {
           padding:5px;
           text-align:center;
        }
        .itemHandle {
           height:15px;
           background:#e5ecf9;
           overflow:hidden;
           border-top:solid 1px #3366cc;
           font-weight:bold;
           cursor:move;
        }
        .dropCue {
           border:dashed 1px #ff0000;
           margin-bottom:5px;
        }
        .emptyList{
           font-weight:bold;
           text-align:center;
        }
        .centered { margin:auto; }
        .templates { visibility:hidden; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   
    <asp:ScriptManager ID="scriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />
        </Scripts>
    </asp:ScriptManager>

    <div class="main">
       
        <%-- Left Area --%>
        <div id="leftArea" class="list1">
            <div id="content1" class="item">
                <div id="content1Handle" class="itemHandle">Content 1</div>
                <div class="itemContent">
                    <asp:Login ID="myLogin" runat="server"
                               CssClass="centered"></asp:Login>
                </div>
            </div>
           
            <div id="content2" class="item">
                <div id="content2Handle" class="itemHandle">Content 2</div>
                <div class="itemContent">
                    <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>
                    <asp:Button ID="myButton" runat="server"
                                Text="ClickMe" />
                </div>
            </div>
        </div>
       
        <%-- Right Area --%>
        <div id="rightArea" class="list2">
            <div id="content3" class="item">
                <div id="content3Handle" class="itemHandle">Content 3</div>
                <div class="itemContent">
                    <asp:Calendar ID="myCalendar" runat="server"
                                  CssClass="centered"></asp:Calendar>
                </div>
            </div>
        </div>
       
        <%-- Templates --%>
        <div class="templates">
            <%-- Drop Cue template --%>
            <div id="dropCueTemplate" class="dropCue"></div>
            <%-- Empty template --%>
            <div id="emptyTemplate" class="emptyList">Drop content here.</div>
        </div>
   
    </div>
      
    </form>

    <script type="text/xml-script">
        <page>
            <components>
               
                <!-- Left Area -->
                <control id="leftArea">
                    <behaviors>
                        <dragDropList dragDataType="HTML"
                                      acceptedDataTypes="'HTML'"
                                      dragMode="Move"
                                      direction="Vertical">
                            <dropCueTemplate>
                                <template layoutElement="dropCueTemplate" />
                            </dropCueTemplate>
                            <emptyTemplate>
                                <template layoutElement="emptyTemplate" />
                            </emptyTemplate>
                        </dragDropList>
                    </behaviors>
                </control>
               
                <!-- Right Area -->
                <control id="rightArea">
                    <behaviors>
                        <dragDropList dragDataType="HTML"
                                      acceptedDataTypes="'HTML'"
                                      dragMode="Move"
                                      direction="Vertical">
                            <dropCueTemplate>
                                <template layoutElement="dropCueTemplate" />
                            </dropCueTemplate>
                            <emptyTemplate>
                                <template layoutElement="emptyTemplate" />
                            </emptyTemplate>
                        </dragDropList>
                    </behaviors>
                </control>
               
                <!-- Draggable items -->
                <control id="content1">
                    <behaviors>
                        <draggableListItem handle="content1Handle" />
                    </behaviors>
                </control>
                <control id="content2">
                    <behaviors>
                        <draggableListItem handle="content2Handle" />
                    </behaviors>
                </control>
                <control id="content3">
                    <behaviors>
                        <draggableListItem handle="content3Handle" />
                    </behaviors>
                </control>
               
            </components>
        </page>
    </script>
</body>
</html> 
3
Réponse 2 / 3
s_shadow
Messages postés
6
Date d'inscription
vendredi 17 mars 2006
Statut
Membre
Dernière intervention
23 avril 2007
13 mars 2007 à 16:25
je sais pas si ça va marcher, mais tu peux toujours utiliser les les services profil de ASP.NET, ceci va te permettre de mémoriser l'emplacement de tes panels.

pour le drag&drop, tu peux faire appel au DragOverlayExtender.

tout ceci est inclu dans le nouveau ASP.NET AJAX.

bonne chance
0
Réponse 3 / 3
abdelilahw3
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
13 mars 2007 à 17:02
Merci,
Je vais essayer avec cette solution,mais j'ai besoin d'un code ou un document qui explique ca.
0