Rich UI drag operation

You can write code so that a user can drag a widget from one location to another. Your code can respond to the following user events: a single mouse-down event when the user holds the position, subsequent mouse-move events, and a single mouse-up event. You can complete runtime tasks that are represented by the drag activity; Rich UI does not define the behavior.
You write the drag code by specifying three properties in a widget declaration and by writing functions that are referenced in the corresponding property values. For example, this code is the declaration of a button:
b1 Button { 
   text = "Button 1", position="absolute",	x=10, y=10,
   onStartDrag = start, onDrag = drag, onDropOnTarget = drop};

Three properties make the drag operation possible:

You might use this example in your workspace:
import com.ibm.egl.rui.widgets.TextField;

handler MyHandler type RUIHandler{initialUI =[myTextField]}
   myTextField TextField{text = 
                   "What a drag!", position = "absolute", x = 110, y = 210, width = 120, 
                   onStartDrag = start, onDrag = drag, onDropOnTarget = drop};
   dx, dy int;

   function start(myWidget Widget in, x int in, y int in) returns(boolean)
      dx = x - myWidget.x;
      dy = y - myWidget.y;
      return(true);
   end

   function drag(myWidget Widget in, drop Widget in, x int in, y int in)
      myWidget.x = x - dx;
      myWidget.y = y - dy;
   end

   function drop(widget Widget in, drop Widget in, x int in, y int in)
   end
end  
The start function calculates the difference between the location of the mouse pointer and the top-left corner of the widget. The effect of using that calculation is that the mouse pointer is displayed at the same place on the widget throughout the operation. To see the effect, run the code twice, clicking the bottom-right corner of the widget to start the drag operation each time:
  1. Run the code as shown
  2. Run the code only after you replace the statements in the drag function with the following assignments:
       myWidget.x = x;
       myWidget.y = y;

To see more examples, see "Rich UI Shadow."


Feedback