AjaxControlToolkit ReorderList not working

I need to use a drag and drop control to order a list. I would like to implement this using the ReorderList control from the AjaxControlToolkit. I've tried everything to get it to work, but it doesn't. Everything went well, like filling out the list, etc. But I can't seem to use this control, how should I use it. When the page loads, it displays the rename list on the left, but when I try to drag the item, it won't drag. It just stays where it is. I've also tried using a different browser like IE9 and Firefox. Can someone please help me with this problem? I am using ASP.NET/C# in Visual Studio 2010.

Thank you in advance!

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>

      

        
        
        
      

    

Code behind:

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";
        }

      

        
        
        
      

    

Image of a reordering list not working (this is what I get if I try to drag an element!):