Jquerry drag and drop et ReorderList

cs_rodcobalt22 195 Messages postés dimanche 10 février 2002Date d'inscription 16 février 2016 Dernière intervention - 16 févr. 2016 à 15:52
Bonjour,

J'ai posté un message trop vite, je m'en excuse auprès de nos modérateurs.

J'ai comme projet d'établir une sorte d'interface permettant de glisser des composant pour construire leur propre fenêtre.

J'ai pu creusé du coté du JQUERRY mais je me heurte à un problème que je ne parvient pas à résoudre.

Je souhaite Faire glisser des Usercontrol depuis une div "ToolsSet" ( vers une autre div "ToolsZone".

ensuite je fais un appel Ajax pour mettre à jour une databletable qui remplit mon ReorderList.

Jusque là tout va bien sauf que lorsque qu'un postback (Même partiel) est fait.
Je ne parvient plus à "Dropper" de nouveau.

Je vous joint mon code mais je cherche et ..... ben je trouve vraiment pas le problème.

Merci d'avance de m'orienter vers une piste / solution.

ASPX

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="Fiche_Memo.Test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/USR/TextTools.ascx" TagPrefix="uc1" TagName="TextTools" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="SCRIPT/jquery-1.12.0.js"></script>
            <script type="text/javascript">
                var srcElement;
              
                $(document).ready(function () {

                    $("div .ToolsSet").each(function () {
                        this.addEventListener('dragstart', OnDragStart, false);
                    });

                
                    $("div .ToolsZone").each(function () {
                        this.addEventListener('dragenter', OnDragEnter, false);
                        this.addEventListener('dragleave', OnDragLeave, false);
                        this.addEventListener('dragover', OnDragOver, false);
                        this.addEventListener('drop', OnDrop, false);
                        this.addEventListener('dragend', OnDragEnd, false);
                    });
                    

                })

                function OnDragStart(e) {
                    this.style.opacity = '0.4';
                    srcElement = this;
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/html', $(this).find("header")[0].innerHTML);
                                   }

                function OnDragOver(e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    $(this).addClass('dragBody');
                    e.dataTransfer.dropEffect = 'move';
                    return false;
                }

                function OnDragEnter(e) {
                    $(this).addClass('dragBody');
                }

                function OnDragLeave(e) {
                    $(this).removeClass('dragBody');
                }

                function OnDrop(e) {
                    
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                   
                    var p_obj = this;
                    srcElement.style.opacity = '1';
                    $(this).removeClass('dragBody');
                    $.ajax({
                        type: 'POST',
                        url: 'Test.aspx/AjouteOutils',
                        contentType: "application/json; charset=utf-8",
                        data: '{p_object:"Texte"}',
                        dataType: 'json',
                        success: function (results) { __doPostBack('', 'null'); DTC(); },
                        error: function () { alert('error');} 
                        })
                }

                function DTC() {
                    $(this).html('');
                }
                
                function OnDragEnd(e) {
                    $("div .ToolsZone").removeClass('dragBody');
                    this.style.opacity = '1';
                }

    </script>
</head>
<body>
     
    <form id="form1" runat="server">

         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
         </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ReloadThePanel" EventName="Click" />
            </Triggers>
            <ContentTemplate>    
                    
                    <cc1:ReorderList ID="ReorderList1" runat="server" PostBackOnReorder="True" ItemInsertLocation="End" SortOrderField="COL_ORDRE">
                        <EmptyListTemplate>Liste Vide</EmptyListTemplate>
                       
                        <ItemTemplate>Objet : </ItemTemplate>
                        <DragHandleTemplate> <div class="DragHandleClass"></div></DragHandleTemplate>
                    </cc1:ReorderList>
                 
 <div id="ZoneDrop" class="ToolsZone" dropzone="True" >
     Déposer le controle ici
                </div>
                          
           
      
         <div class="ToolsSet" draggable="true">
            TOTO
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools1" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools2" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools3" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools4" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools5" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools6" />
        </div>
          <div class="ToolsSet" draggable="true">
             <uc1:TextTools runat="server" ID="TextTools7" />
        </div>
           
       
   <asp:Button ID="ReloadThePanel" runat="server" style="display:none;" />
                 </ContentTemplate>
        </asp:UpdatePanel>
    </form>
     </body>
</html>


Behind
Public Class Test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim dtTable As DataTable
        Dim dcColomn As DataColumn
        Dim drNewRow As DataRow
        If Not IsPostBack Then
            dtTable = New DataTable
            dcColomn = New DataColumn()
            dcColomn.ColumnName = "COL_TITRE"
            dtTable.Columns.Add(dcColomn)
            dcColomn = New DataColumn()
            dcColomn.ColumnName = "COL_TYPE"
            dtTable.Columns.Add(dcColomn)
            dcColomn = New DataColumn()
            dcColomn.ColumnName = "COL_ORDRE"
            dtTable.Columns.Add(dcColomn)

        Else

            dtTable = Me.Session("TABLE")

        End If

        Me.ReorderList1.DataSource = dtTable
        Me.ReorderList1.DataBind()

        Me.Session("TABLE") = dtTable

    End Sub
    <System.Web.Services.WebMethod()> _
    Public Shared Function AjouteOutils(p_object As String) As String

        Dim dtTable As DataTable
        Dim drItem As DataRow

        dtTable = DirectCast(HttpContext.Current.Session("TABLE"), DataTable)
        drItem = dtTable.NewRow()

        drItem("COL_TITRE") = "Titre"
        drItem("COL_TYPE") = "Type"
        drItem("COL_ORDRE") = dtTable.Rows.Count
        dtTable.Rows.Add(drItem)

        HttpContext.Current.Session("TABLE") = dtTable

        Return "Yes"

    End Function

   

    Protected Sub ReorderList1_ItemReorder(sender As Object, e As AjaxControlToolkit.ReorderListItemReorderEventArgs) Handles ReorderList1.ItemReorder



    End Sub
End Class
Afficher la suite 

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.