That's a drag

• Download demo project with source code - 146 Kb

Introduction

Doing some rewriting on my program NewsReactor, I developed this queue that you can rearrange using your mouse. I wanted the possibility of dragging a multiple selection freely around the list. Since I'm using a virtual listview, I needed some simple functions for my backend that enables moving items. The simplest function to make this possible is a swap function. It's almost never hard to swap two items (or records) from a list. Therefore, this method enables "dragging by swapping". As an example, I've made a little card game. It's your job to order the deck and win ever lasting honor and admiration.

Let's get this show on the road

This example uses a MFC document/view application. But the essential code could be easily ported to WTL or plain APIs.

The main attention goes to the CDraggerView class. This is where the show gets on the road. We need two extra member variables:

• BOOL m_Dragging
• UINT m_DragItem

Let's clear them in the constructor:

CDraggerView::CDraggerView()
{
    // Member variable to check if we are dragging
    m_Dragging = FALSE;
    // Member variable to store the selected
    // item when starting a drag
    m_DragItem = 0;
}

The most important for implementing the effective dragging is the extended listview style LVS_EX_FULLROWSELECT. In the CDraggerView::OnInitialUpdate() override, we can set this:

void CDraggerView::OnInitialUpdate()
{
    ...
    CListCtrl &list = GetListCtrl();
    list.SetExtendedStyle(list.GetExtendedStyle()| 
                          LVS_EX_FULLROWSELECT );
    ...
}

Drag Race

Dragging starts when the mouse button goes down on an item and the moving starts. There's a nice message for this: ON_NOTIFY_REFLECT(LVN_BEGINDRAG, OnLvnBegindrag). We need a handler for it:

void CDraggerView::OnLvnBegindrag(NMHDR *pNMHDR, LRESULT *pResult)
{
    LPNMLISTVIEW pNMLV = reinterpret_cast<LPNMLISTVIEW>(pNMHDR);

    // Set dragging to ON
    m_Dragging = TRUE;

    // Store item where dragging begins
    m_DragItem = pNMLV->iItem;

    // Get the mouse capture on list control
    GetListCtrl().SetCapture();

    *pResult = 0;
}

On the move

Now to make dragging happen in real time, we are going to get this done in the ON_WM_MOUSEMOVE() message handler. The main tricky stuff is in here:

void CDraggerView::OnMouseMove(UINT nFlags, CPoint point)
{
    CListCtrl& list = GetListCtrl();
    // Are we dragging?
    if(m_Dragging)
    {
        // Disable list drawing for less flickering
        list.SetRedraw(FALSE);

        // Now find the item where the mouse cursor is
        UINT flags=0;
        UINT index = list.HitTest( point, &flags );

        // No valid item found? Perhaps
        // the mouse is outside the list
        if(index==-1)
        {
            int top = list.GetTopIndex();
            int    last = top + list.GetCountPerPage();
            // Mouse is under the listview,
            // so pretend it's over the last item
            // in view
            if(flags & LVHT_BELOW) index=last;
            else 
            // Mouse is above the listview,
            // so pretend it's over the top item in
            // view - 1
                if(flags & LVHT_ABOVE) index=top-1;
        }

        // Do we have a valid item now?
        if(index!=-1) {
            // calculate the offset between the two items
            int offset = index-m_DragItem;
            // Is it not the same item?
            if(offset != 0) {
                // Do we have a multiple selection?
                UINT selectedcount = list.GetSelectedCount();
                // Create an array of selected
                // items (could use CArray here)
                UINT *selected = new UINT[selectedcount];
                UINT i = 0;
                // Add all selected items to this array
                POSITION pos = list.GetFirstSelectedItemPosition();
                while(pos) 
                    selected[i++]=list.GetNextSelectedItem(pos);
                // Now we are going to move the selected items
                for(i=0;i < selectedcount;i++){
                    // If we are moving the selection downward, we'll start
                    // with the last one and iterate up. Else start with
                    // the first one and iterate down.
                    int iterator = (offset>0) ? selectedcount-i-1 : i;
                    // Now get the position of the first selected item
                    int oldpos = selected[iterator];
                    // Calculate the new position
                    int newpos = oldpos+offset;
                    // Is the new position outsize the list's boundaries? break
                    if(newpos<0 || newpos>=list.GetItemCount()) break;
                    // Unselect the item
                    list.SetItemState(oldpos, 0, LVIS_SELECTED);
                    // No we keep swapping items until the selected
                    // item reaches the new position
                    if(offset>0) {
                        // Going down
                        for(int j=oldpos;j < newpos;j++) 
                            SwapRows(j,j+1);
                    }else {
                        // Going up
                        for(int j=oldpos;j > newpos;j--) 
                            SwapRows(j,j-1);
                    }
                    // Make sure the newposition is in view
                    list.EnsureVisible(newpos,TRUE);
                    // Select it again
                    list.SetItemState(newpos, LVIS_SELECTED, LVIS_SELECTED);
                }
                // Free the array
                delete [] selected;
                // Set the dragging item to the current index position,
                // so we can start over again
                m_DragItem=index;
            }
        }
        // Enable drawing in the listview again
        list.SetRedraw(TRUE);
    }
    CListView::OnMouseMove(nFlags, point);
}

You might ask: What's with all the for loops and swapping? Why not a simple MoveTo() function? Well, it all depends on what you are using as a dataset. In a simple listview with items maintained by the listview itself, it's quite simple to remove an item and insert it at another position, automatically shifting all others. When using a virtual listview with a database, for example, this is not always so simple. Swapping is almost always quite simple as said. Swapping an item multiple times happens only when the mouse is moved very fast, so: offset > 1 or offset < -1.

Hot swapping

Swapping rows is quite simple with most datasets, mostly this boils down to temp=row1;row1=row2;row2=temp:

BOOL CDraggerView::SwapRows(UINT row1,UINT row2)
{
    // In this function we need to swap two rows,
    // Here it does some mangling with the listview's item texts/image/userdata
    // If you have a virtual list view you can swap it's items here

    //... code to swap rows ...
}

Clean up your act

When finished dragging, the mouse button is released and we need to clean up:

void CDraggerView::OnLButtonUp(UINT nFlags, CPoint point)
{
    // Were we dragging?
    if(m_Dragging) {    
        m_Dragging = FALSE;
        // Release mouse capture
        ReleaseCapture();
        // Check puzzle state
        CheckPuzzle();
    }
    CListView::OnLButtonUp(nFlags, point);
}

Well now, isn't that a drag?