This is a step-by-step tutorial demonstrating how to make draggable Objects.
Aim
This tutorial introduces startDragUnlocked(), startDragLocked() and stopDrag() methods and onSelfEvent(press) and onSelfEvent(release) Events to start and stop dragging.
.swi file
"dragging.swi"
| 1. | Start with a new project (File | New) and save the file as "mydragging.swi"
|
| 2. | Draw a small circle and name it "ball" on the 'Shape' panel then tick the 'Target' checkbox so that it can be used as a Scripting Object. This circle will be used as the Object that is dragged
|
| 3. | Select the Script tab and add an onSelfEvent(press) event for the ball.
|
| 4. | Right-click on the function name to add a Mouse Dragging | startDragUnlocked() command to the onSelfEvent(press) function.
|
The resulting script should be as shown below:
| Leave the 'Target:' parameter blank. This will result in the current Object (ball) being the item intended to be dragged
|
| 5. | In a similar way, create an onSelfEvent(release) function for the ball with the command Mouse Dragging | stopDrag();
|
| 6. | Select the 'Layout' tab and press the 'Play' button. Move the mouse over the ball Object and press the left mouse button. While the button is held down, you should be able to drag the ball around the 'Layout' Panel. When the button is pressed, the mouse position within the Object stays in the location where the mouse was first pressed
|
| 7. | Select the 'Script' tab and then select the startDragUnlocked() command. Check the 'Lock' checkbox. This will change the command to startDragLocked(). Return to the 'Layout' Panel and observe the new behaviour (press play if it is not already running)
|
Note: When the left mouse button is pressed over the Object, the mouse position within the Object now snaps to the Anchor Point of the "ball" object.
Analysis
This tutorial demonstrates how to make an Object draggable according to mouse input. The onSelfEvent(press) and onSelfEvent(release) Events are used to start and stop dragging of the ball Object. The methods startDragUnlocked(), startDragLocked() and stopDrag() are used to start and stop the dragging. The startDragLocked() method can be used to force dragging from the Anchor Point of the object.