1. Accueil
  2. Forum Codes-Sources
  3. ASP / ASP.NET
  4. ASP.NET

DragDropList avec le framework ASP.NET AJAX [Résolu]

Signaler
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
 -
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
 -
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
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
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> 
Réponse 2 / 3
Messages postés
6
Date d'inscription
vendredi 17 mars 2006
Statut
Membre
Dernière intervention
23 avril 2007
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
Réponse 3 / 3
Messages postés
15
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
15 mai 2007
Merci,
Je vais essayer avec cette solution,mais j'ai besoin d'un code ou un document qui explique ca.
Répondre Posez votre question