Dragger Demo and Documentation

    

This demo show several draggable items.

  • ACircleButton which can be either yellow or red. When it is dragged, the ScrollBar, Slider, and ScrollPane are adjusted according to the location of the circle. Because a CircleButton does not have built in draggable properties, it has to be handled in a slightly different way than the other items.
  • A ScrollBar oriented vertically. It controls and is controlled by the "y" location of the CircleButton.
  • A Slider oriented horizontally. It controls and is controlled by the "x" location of the CircleButton.
  • A green ScrollPane with a yellow scroll button which controls and is controlled by the CircleButton in both the "y" and "x" directions. The ScrollPane is also set up to respond to clicks.

In addition, there is "CheckBox" that is used to control the color of the circle. Arbitrarily, it was decided that it would not be draggable (although it could have been just like the CircleButton).

Unfortunately the scroll bar and scroll panel will probably not work on touch screens. While the operating system typically passes taps on to the application as clicks, it captures the swiping actions and does not let applications see them without using special techniques which unfortunately are often system dependent.

Display sketch code: DraggerDemo.pde. The Dragger code is in Dragger.pde.

It only takes one Dragger object to handle dragging. Typically the Dragger object is provided a list of Clickable items that can dragged.

The file Dragger.pde must be included in data-processing-sources in the canvas statement in the .html file. For example, this file uses the statements:

<canvas id="Dragger1ADemo"
    data-processing-sources="DraggerDemo.pde Dragger.pde Clickable.pde"> </canvas>

To drag a clickable item that has been included in the list given the Dragger, the following code could be used. We assume that "btn" is the item to be dragged and the dragger is called "drag". In the mousePressed() method we would see:

  Clickable cItem;
  if (drag.checkForDrag()) {
    cItem = drag.getItemTracked();
    if (cItem == btn) {
      drag.track(ballBtn.getX(), ballBtn.getY()); 
   } ...

The mouseMoved() method would contain:

  Clickable cItem;
  cItem = drag.getItemTracked();
  drag.updateDrag();
  if (mousePressed) {
    if (cItem == btn) {
      btn.setY(drag.getUpdatedY());
      btn.setX(drag.getUpdatedX());
    } ...

abstract class Dragger

Class Description

** Dragger(Clickable[] draggableArray)
- A constructor that includes the list of items that could be dragged. The list should set up so the "top" item, the one drawn last, should be the last item in the list. That is, it should be in the same order that the Clickable Group is ordered. All items that are dragged should be included in the array for the ClickableGroup but only the Clickable items that can be dragged should be in th draggableArray
** boolean checkForDrag()
Called by mousePressed() when the mouse is pressed. When called after the mouse is pressed, the dragableArray list is searched in reverse order to see if the cursor is over any of the items. If so, the method returns "true".
** void track(int xVal, int yVal)
- Provides a point that will be tracked during dragging. A clickable item can be dragged by using its location as the point and adding appropriate code in the mouseMoved() method. Should only be called from mousePressed().
** void endDrag()
- Terminates a drag. Called in the mouseReleased() method.
** void setDraggedPointBoundaries(ClickablePanel pnl)
- Restricts the point being dragged to the area of the panel even if the cursor moves out of the panel.
** void setDraggedPointBoundaries(int x, int y, int w, int h)
- Restricts the point being dragged to the specified rectangle even if the cursor moves outside the area. The default: The whole sketch.
** void setOutsideLimit(int distance)
- Used to specify how far the mouse can be moved outside the area specified by setDraggedPointBoundaries (in pixels) before the drag is terminated. Default = 100 pixels. It can even be negative if you don't want the point to get to close to the boundaries.
** void setMinForDrag(int distance)
- Specifies the number of pixels the cursor must be moved before a drag is begun. This is so a drag will not be initiated if the user just wants to click the item but moves the mouse very slightly in the process. Default = 4 pixels.
** int deltaX()
- Returns the horizontal (x) distance the mouse has moved since it was pressed. The dragged point is constrained to the specified boundary. Before returning, it calculates the updated location. This can be used if the sketch needs to track multiple points. Add the delta distances to the starting location.
** int deltaY()
- Returns the vertical (y) distance the mouse has moved since it was pressed. The dragged point is constrained to the specified boundary. Before returning, it calculates the updated location. This can be used if the sketch needs to track multiple points. Add the delta distances to the starting location.
** int getUpdatedX()
- Returns the current horizontal (x) coordinate of the tracked point.
** int getUpdatedY()
- Returns the current vertical (y) coordinate of the tracked point.
** void updateDrag()
- updateDrag() normally should be called by mouseMoved(). It checks to see
1. if the mouse has moved outside the rectangle allowed for the drag. (See setDraggedPointBoundaries() ). If so, the drag is terminated.
2. if the mouse has moved far enough that a drag should be initiated. (See setMinForDrag().)
** Clickable getItemTracked()
- Returns the item be tracked.
** boolean getWasDragging()
- Returns "wasDragging", i.e. was something was being dragged before the drag was terminated by updateDrag(). This can useful to avoid unwanted clicks after the mouse button is released even if the mouse is released by updateDrag() or endDrag() even though the mouse actually still pressed.

Method use codes:

** This constructor or method is designed to be called in the user sketch.

* This method is normally not called in the user's sketch unless the Clickable item was not been included in a ClickableGroup. ClickableGroup automatically uses the method as needed. Exception: This method may be needed if the user is extending Clickable with a new class.

# This constructor or method is rarely used in the user program. In Java, it would probably marked "private". Clickable, ScrollBar, and some other abstract constructors would never be called directly by the user sketch because they do nothing useful unless the user is extending a class.

Return to the top of the page

Revised: 04/11/2014