How to reposition list items using drag and drop
It's much easier for the user to set the order of list items by dragging them into position rather than providing clumsy up and down buttons to shift things around. For example, if you have a user who wants to customise the order in which a list of database fields are displayed on screen, then you could create a list containing those fields and simply tell the user to drag them around until they're in the desired order.
For this demonstration you will need to draw a form which has a single SBList on it. Set the ItemHeight property of the list to 16.
Copy this bitmap into SDKPaint as a cursor and set the magenta pixels as being the screen colour. Set the hotspot anywhere on the top edge of the rectangular block. Save the image as a cursor and then load it as the DragIcon image for your SBList.
1. Insert the following code into your General Declarations section:
Dim OrigX As Integer
Dim OrigY As Integer
Dim OrigIndex As Integer
These variables will be used to keep track of where the drag began and which list item we are dragging.
2. Insert the following code into your Form_Load event:
For A% = 1 To 10
SBList1.AddItem "List item " & A%
Next A%
This is just to give us some items to drag around.
3. Insert the following code into your SBList1_MouseDown event:
OrigX = X
OrigY = Y
OrigIndex = SBList1.ListIndex
We are storing the X and Y position of the mouse so that we can measure how far it has moved in the MouseMove event, and only start the drag operation when it's clear that the user is dragging rather than just clicking badly.
4. Insert the following code in your SBList1_MouseMove event:
If (Button And 1) = 1 Then
If Abs(OrigX - X) > 45 Or Abs(OrigY - Y) > 45 Then
' Drag this list item...
SBList1.ListIndex = OrigIndex
SBList1.Drag
End If
End If
The user has the mouse button held down, and in the second line we are measuring how far it has moved since it was held down. The current tolerance is 45 twips in any direction (roughly 3 pixels). Once we are happy that the user is dragging, we set the list index to which ever item the MouseDown event was fired on (the mouse may have strayed onto the item above or below the original choice) and commence dragging.
5. Insert the following code in your SBList1_DragOver event:
NewIndex = Int(SBList1.TopIndex + _
((Y / Screen.TwipsPerPixelY) / SBList1.ItemHeight))
If NewIndex < SBList1.ListCount Then
SBList1.ListIndex = NewIndex
Endif
We calculate which list item the mouse is over in the first line of code, and select it in the second line (provided that it exists). This is so that as you drag the mouse around, the list item which you are going to insert before is highlighted and the user doesn't have to guess where the dragged list item will be dropped.
6. Insert the following code in your SBList1_DragDrop event:
N$ = Source.List(OrigIndex)
LI% = Source.ListIndex
If LI% > OrigIndex Then
Source.RemoveItem OrigIndex
Source.AddItem N$, LI% - 1
ElseIf LI% < OrigIndex Then
Source.RemoveItem OrigIndex
Source.AddItem N$, LI%
End If
Source.ListIndex = LI%
In this code we remove the item which was dragged and re-add it to the list in the relevant position. If the dragged item is being dropped lower down the list than it started, we need to take that into account when we remove it and re-add it, because after we remove it all the list items will have shifted up one place. If it was dropped above itself this isn't a concern. If the item was dropped on itself, we simply ignore it.
In the last line of code we select the item which we originally dragged.
Topic devised by Andy Groom.