Is there a way to code a drag and drop behavior on an image?


#1

Trying to add code to drag an image when it is pressed by the mouse and drop it when the mouse is released. Is this possible in App Lab?


#2

In Javascript an drag operation involves three kinds of events:

  1. A mousedown event indicates that the user has pushed down a mouse button while the curser was positioned over the draggable event.
  2. A series of mousemove events is generated as the user moves the curser around the screen.
  3. A mouseup event that signals that the user has released the mouse button, completing the drag operation.

These events are available in AppLab.


#3

Yes. I think click and drag is an interesting exercise because it reveals how something so simple seeming can be challenging from scratch.

Here is a very basic demo that shows the principle: https://studio.code.org/projects/applab/yOp_38MuwcDhWKNLmoB2mQ/

The key insights you need are:

(1) that the event parameter is an object that contains lots of properties for detecting the position of the mouse. do a console.log on the event property to see the possibilities. But e.g. event.x will give you the x-position of the mouse at the time the event occurred (for which you have an event handler setup).

(2) You need to maintain some kind of variable to track the state of the object - i.e. isDragging so that the three discrete events you can check know what to do. ie. mousedown on the images sets isDragging to true; mouseup sets isDragging to false, and mousemove applied to the entire screen can check whether isDragging is true to know whether to reposition the image.

Hope this helps,

Baker