javascript - ASP.NET 拖放

Question

我是 ASP.NET 新手 我的任务是创建一个拖放系统。 现在我对页面的每个元素使用向上和向下，请参见屏幕截图。如何以与排序对象相同的思想来管理拖放？

这是一个代码

protected void lb_up_Command(object sender, CommandEventArgs e) 
{ 
    ChangeItemNumber(int.Parse(e.CommandArgument.ToString()), -1); 
} 
protected void lb_down_Command(object sender, CommandEventArgs e) 
{ 
    ChangeItemNumber(int.Parse(e.CommandArgument.ToString()), 1); 
}
private void ChangeItemNumber(int id, int changeValue) 
{ 
    Dal dal = new Dal(); 
    var itemToChange = dal.GetSale(id); 
    Sale replacedLesson = null; 
    if (changeValue == -1) 
    { 
        for (int i = 0; i < rp_sales.Items.Count; i++) 
        { 
            if (((HiddenField)rp_sales.Items[i].FindControl("hf_id")).Value == id.ToString()) 
            { 
            replacedLesson = dal.GetSale(int.Parse(((HiddenField)rp_sales.Items[i - 1].FindControl("hf_id")).Value)); 
            break; 
            } 
        } 
    } 
    else 
    { 
        for (int i = 0; i < rp_sales.Items.Count; i++) 
        { 
            if (((HiddenField)rp_sales.Items[i].FindControl("hf_id")).Value == id.ToString()) 
            { 
                replacedLesson = dal.GetSale(int.Parse(((HiddenField)rp_sales.Items[i + 1].FindControl("hf_id")).Value)); 
                break; 
            } 
        } 
    //replacedLesson = dal.GetNextCategoryInLine((int)itemToChange.OrderNumber,chk_activeOnly.Checked); 
    }

    ViewState["main"] = itemToChange.ID; 
    ViewState["sub"] = replacedLesson.ID; 

    var num = (int)itemToChange.OrderNumber; 
    itemToChange.OrderNumber = replacedLesson.OrderNumber; 
    replacedLesson.OrderNumber = num; 

    // NormelizeLessonOrder(); 
    dal.Save(); 
    LoadData(); 
}

ASPX 代码

<ItemTemplate> 
<asp:Literal runat="server" ID="lit_tableRow"></asp:Literal> 
<td> 
<asp:HiddenField runat="server" ID="hf_counter" /> 
<asp:HiddenField runat="server" ID="hf_id" /> 
<asp:LinkButton OnClientClick="showLoad();" Font-Size="XX-Large" runat="server" ID="lb_up" OnCommand="lb_up_Command" CommandArgument='<%# Eval("ID") %>'><span class="fa fa-2x fa-caret-up"></span></asp:LinkButton> 
<asp:LinkButton OnClientClick="showLoad();" Font-Size="XX-Large" runat="server" ID="lb_down" OnCommand="lb_down_Command" 
CommandArgument='<%# Eval("ID") %>'><span class="fa fa-2x fa-caret-down"></span></asp:LinkButton>&nbsp;&nbsp; 
</td> 
<td> 
<asp:Image runat="server" ID="img_logo" Height="50px" /> 
</td> 
<td> 
<asp:Label runat="server" ID="lbl_name" /><br /> 
<asp:Label runat="server" ID="lbl_Status"></asp:Label> 
</td> 
<td> 
<asp:Label runat="server" ID="lbl_Title" Font-Bold="true" /><br /> 
<asp:Label runat="server" ID="lbl_data" Font-Size="Small"></asp:Label> 
</td> 
<td> 
<asp:Label runat="server" ID="lbl_category"></asp:Label> 
</td> 
<td> 
<asp:Label runat="server" ID="lbl_totalSales"></asp:Label> 
</td> 
<td> 
<asp:Literal runat="server" ID="lit_view"></asp:Literal> 
</td> 
</tr> 
</ItemTemplate>

Answer 1

是的，请使用 Jquery-UI。以下链接可能对您有用:

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

https://jqueryui.com/draggable/

https://jqueryui.com/droppable/