AjaxControlToolkit ReorderList不工作

Question

我需要使用拖放控件来排序列表。我希望通过AjaxControlToolkit中的ReorderList控件来实现这一点。我已经尝试了所有的方法来让它工作，但是它不能工作。一切都进行的很好，比如列表的填充等等。但是我不能像应该使用的那样使用这个控件。当页面加载时，它会显示一个列表，左侧有一个reordergrip，但当我尝试拖动一个项目时，它不会拖动。它只是停留在原地。我也尝试过其他浏览器，比如IE9和火狐。有人能帮我解决这个问题吗？我在Visual Studio2010中使用ASP.NET/C#。

提前谢谢你！

ASPX：

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div class="ajaxOrderedList">
            <asp:ReorderList runat="server" DataSourceID="SqlDataSource1" ID="rlData" PostBackOnReorder="true" DragHandleAlignment="Left" ItemInsertLocation="Beginning" SortOrderField="Naam" AllowReorder="true">
                <DragHandleTemplate> 
                    <asp:Panel ID="dragHandle" runat="server" 
                        style="height: 20px; width: 20px; border: solid 1px black; background-color: Red; cursor: pointer;" 
                        Visible="<%# ShowDragHandle %>">
                        &nbsp;
                    </asp:Panel>
                    </DragHandleTemplate> 
                <ItemTemplate>
                    <div class="itemArea"> 
                        <asp:Label ID="lblNaam" runat="server" Text='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("Naam")))  %>' />
                        <asp:Label ID="lblFunctie" runat="server" Text='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("Functie")))  %>' />
                    </div>
                </ItemTemplate>
                <ReorderTemplate>
                    <div style="width: 300px; height: 20px; border: dotted 2px black;">
                        &nbsp;
                    </div>
                </ReorderTemplate>
            </asp:ReorderList>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:testdataConnectionString %>" 
    SelectCommand="SELECT [id], [naam], [functie] FROM [personen]" DeleteCommand="DELETE FROM [personen] WHERE [id] = @intID"
                InsertCommand="INSERT INTO [personen] ([naam], [functie]) VALUES (@strNaam, @strFunctie)"
                UpdateCommand="UPDATE [personen] SET [naam] = @strNaam, [functie] = @strFunctie WHERE [id] = @intID">
                <DeleteParameters>
                <asp:Parameter Name="intID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="strNaam" Type="String" />
                <asp:Parameter Name="srtFunctie" Type="String" />
                <asp:Parameter Name="intID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="strNaam" Type="String" />
                <asp:Parameter Name="srtFunctie" Type="String" />
            </InsertParameters>
</asp:SqlDataSource>

代码隐藏：

DataView MyDView = null; 

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ShowDragHandle = true;
            }
        }

        protected void ReorderList1_ItemReorder(object sender, ReorderListItemReorderEventArgs e)
        {
            ShowDragHandle = true;
        }

        protected Boolean ShowDragHandle { get; set; }


        protected void Page_PreInit(object sender, EventArgs e)
        {
            //set theme
            this.Theme = "ServiceSuite";
        }

不工作的Reorderlist的图像(这是我尝试拖动项目时得到的结果！)：

​

​

Answer 1

尝试将其添加到reorderlist属性中

ClientIDMode="AutoID"

Answer 2

我在使用旧版本的AjaxControlToolkit时也遇到了同样的问题。它似乎在当前版本(2012年9月)中得到了修复，我当然不能在我的项目中使用它。但也许更新会对其他人有所帮助。