Gridview drag-and-drop (not reordering)

See more:

ASP.NET

Gridview

Situation:
I have a form where I want to present the user with a week schedule. I have chosen a GridView to do so, with columns for each day and rows for the hours; each hour is shown by 4 images that represent quarters. 24 rows are created server-side, and populated with various quarter images in the cells based on a database.

Desire:
I want the user to indicate time intervals by drag and drop. To prevent postbacks, I'm using javaScript; the modified grid data will be posted back by a "Save" button later.

Problem:
As soon as I start the dragging, all other images are indicated as "not allowed" as dragging targets (the "no parking" sign), and the MouseUp event isn't fired when I release the mouse.

Dragging to exactly the same image is the only allowed drag target (MouseUp fires). Dragging to outside the GridView doesn't work either (global MouseUp event isn't fired), but dragging from outside the GridView unto it works too (object MouseUp and global MouseUp both fired).

Extra info:
I've tried this with CanReorderItems="false" too, nothing changes. The various functions contain only alerts for testing. GridView code is below.

What am I doing wrong? CanDragItems is apparently not enough to allowing dragging within the grid?

<asp:GridView ID="gvWeekschema" runat="server" AutoGenerateColumns="False"
    AllowPaging="True" PageSize="1000"
    OnDataBound="Weekschema_DataBound"
    OnDataBinding="Weekschema_DataBinding"
    OnRowDataBound="Weekschema_RowDataBound"
    AllowDrop="True"
    CanDragItems="True"
    CanReorderItems="True"

    OnPreRender="Weekschema_PreRender"
    Font-Size="Smaller" Font-Names="Arial" ShowFooter="true">


    <Columns>
        <asp:BoundField DataField="Time" HeaderText="Tijd"
            ReadOnly="True" >
        </asp:BoundField>
        <asp:TemplateField HeaderText="Ma ">
            <ItemTemplate>
               <asp:Image ID="dg0000" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
               <asp:Image ID="dg0001" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
               <asp:Image ID="dg0002" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
               <asp:Image ID="dg0003" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)" AllowDrop="True"/><br />
            </ItemTemplate>
            <ControlStyle Font-Bold="True" Width="100px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Di ">
            <ItemTemplate>
               <asp:Image ID="dg0100" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
               <asp:Image ID="dg0101" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
               <asp:Image ID="dg0102" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
               <asp:Image ID="dg0103" runat="server" ImageUrl="images/KwartierNiks.jpg" onclick="test(this)" onmousedown="OnMouseDown(this)" onmouseup="OnMouseUp(this)"/><br />
            </ItemTemplate>
            <ControlStyle Font-Bold="True" Width="100px" />
        </asp:TemplateField>

            (some more templatefields for wednesday to sunday)

    </columns>
</asp:GridView>

There's some global JS that doesn't seem to have anything to do with it, still I'm posting it to be complete:

    document.onmouseup = OnMouseUpAnywhere;
    document.onmousemove = OnMouseMove;
    var DragObject = null;

    //Preload images
    var kwartierNiks = new Image(); kwartierNiks.src = "images/KwartierNiks.jpg";
    var kwartierStd = new Image(); kwartierStd.src = "images/KwartierStd.jpg";
    var kwartierSpc = new Image(); kwartierSpc.src = "images/KwartierSpc.jpg";
    var kwartierWrk = new Image(); kwartierWrk.src = "images/KwartierWrk.jpg";
    function mouseMove(ev) {
        ev = ev || window.event;
        var mousePos = mouseCoords(ev);
        if (dragObject) {
            dragObject.style.position = 'absolute';
            dragObject.style.top = mousePos.y - mouseOffset.y;
            dragObject.style.left = mousePos.x - mouseOffset.x;
            return false;
        }
    } 

    function test(obj) {
        obj.src = kwartierWrk.src;
    }
    function OnMouseDown(obj) {
        DragObject = obj;
        return false;
//        alert('Starting drag:');
//        alert(obj.parentElement.cellIndex);
//        alert(obj.parentElement.parentElement.rowIndex);
    }
    function OnMouseUp(obj) {
        alert('Ending drag:');
        alert(obj.parentElement.cellIndex);
        alert(obj.parentElement.parentElement.rowIndex);
    }
    function OnMouseUpAnywhere(obj) {
        DragObject = null;
        alert('Ending drag anywhere:');
    }