MATLAB GUI: Designing drag-and-drop interaction

The goal of the series is to design and implement a gui that allows the user to drag and drop an uicontrol in the gui. After all the basic forms of interactions covered in the previous tutorials, we are now ready to design the mouse interactions to meet our specific need.

The mouse has two states, up and down, and has three actions, pressed, moved, and released. However, since you can not press the button when the it is already down, or release the button when it is already up, we are left with only four scenarios to account for (as shown in Table 1 below).

Table 1. Mouse states and actions

State \ Action	Pressed	Moved	Released
Up	Pick up the uicontrol	Update the pointer	N/A
Down	N/A	Move the uicontrol	Drop the uicontrol

Note: when the mouse is moved over a uicontrol, the ButtonDownFcn property of the uicontrol takes over the WindowButtonDownFcn property of the gui, thus, when the mouse is pressed within the uicontrol, ButtonDownFcn is called instead of WindowButtonDownFcn. Moreover, there is a specific set of rules for activating the ButtonDownFcn. It is not as simple as pressing the mouse button within the uicontrol (though, in theory, it should be that simple). For detail of the rules, check here. 

While it may still look complicated, the design of the drag-and-drop functionality is rather easy, mainly because of the fact that the different functions can be attached to the ButtonDownFcn property of the uicontrol, WindowButtonUpFcn and WindowButtonMotionFcn properties of the gui. Since the the same action can have two different outcomes depending on the state the mouse is in, one has to attach different functions to the properties accordingly. Below, we will go through the design using pseudo code. Note that some of the functions are coded as sub/nested function because they will never be called in any other places.

function drag_and_drop [attached to WindowButtonMotionFcn]
updates the pointer and ButtonDownFcn property as mouse moves in and out of the uicontrol hotspot  

   function grab [attached to ButtonDownFcn]
   updates the pointer to closed-hand shape, attach function drag to WindowButtonMotionFcn and attach function drop to WindowButtonUpFcn as mouse button is pressed 

      function drag [attached to WindowButtonMotionFcn ]  
      updates the object locations 
      end of function drag

      function drop [attached to WindowButtonUpFcn] 
      updates the pointer to hand-shape, re-attach function drag_and_drop to WindowButtonMotionFcn, remove handle to WindowButtonUpFcn. 
      end of function drop 

end of function grab

end of function drag_and_drop