Jquerry drag and drop et ReorderList

Messages postés
195
Date d'inscription
dimanche 10 février 2002
Statut
Membre
Dernière intervention
16 février 2016
-
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