Alianza Soluciones IT

Para efectuar Drag & Drop en un GridView de una página ASP, podemos seguir el siguiente procedimiento.

Se requiere las siguientes librerías:

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

Definir la función ‘javascript’ pageLoad, se utiliza esta función cuando el Gridview está dentro de un UpdatePanel:

function pageLoad() {
            $('.block').draggable({ 
                helper: 'clone',
                opacity: 0.8
            }).droppable({
            accept: '.block',
                hoverClass: "ui-state-active",
                drop: function(event, ui) {
                    var droppedItem = $(ui.draggable).clone();
                    var toindex = $(this)[0].children[0].value;
                    fromindex = $(droppedItem).children("input")[0].value;
                    if (confirm('Desea mover el elemento seleccionado?')) {
                        var webMethod = 'Areas.aspx/MoverArea'
                        var parameters = "{'a':'" + toindex + "','Cod':'" + fromindex + "'}"
                        $.ajax({
                            type: "POST",
                            url: webMethod,
                            data: parameters,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function(msg) {
                            if (msg.d.length>0)
                                alert(msg.d);
                            else
                                __doPostBack('MoverArea', '');
                            },
                            error: function(e) {
                                alert("Error");
                            }
                        });
                    }
                }
            });
        };

Crear los estilos:

.block
{
}
.ui-state-active
{
    background-color:#FF9933;
}

En el GridView definir la columna para arrastrar y soltar:

<ItemTemplate>
  <div class="block">
    <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Cod_Area")%>' />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Move.png" Width="16" ToolTip="Mover el área" />
  </div>
</ItemTemplate>

En código de la página definir el método que efectuará la actualización:

 <WebMethod()> _
Public Shared Function MoverArea(ByVal a As String, ByVal Cod As String) As String
    Dim wClAreas As New ClAreas
    Return wClAreas.MoverArea(a, Cod)
End Function

Finalmente controlar el evento Page_Load de la página:

If Request.Params.Get("__EVENTTARGET") = "MoverArea" Then
  'GridView.databind()
End If