# Is there a way to code a drag and drop behavior on an image? **URL:** \ **Category:** CS Principles\ **Created:** [December 12, 2017, 5:10pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037 "2017-12-12T17:10:41Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![rhartsook](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@rhartsook](https://forum.code.org/u/rhartsook)\ **Post date:** [December 12, 2017, 5:10pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/1 "2017-12-12T17:10:41Z")
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? ---
**Author:** ![terence.stone25](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/terence.stone25/32/5124_2.png) [@terence.stone25](https://forum.code.org/u/terence.stone25)\ **Post date:** [December 13, 2017, 3:00pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/2 "2017-12-13T15:00:29Z")
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. ![](https://cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/flex016/uploads/codeorgforum/original/2X/9/9e0f09923b2bd7bb1d1fdd0a050a86e01ee5dd3c.png) ---
**Author:** ![baker](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/baker/32/1229_2.png) [@baker](https://forum.code.org/u/baker)\ **Post date:** [December 13, 2017, 4:00pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/3 "2017-12-13T16:00:00Z")
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/](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 ---
**Author:** ![nadine](https://avatars.discourse-cdn.com/v4/letter/n/7cd45c/32.png) [@nadine](https://forum.code.org/u/nadine)\ **Post date:** [June 12, 2019, 1:51pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/4 "2019-06-12T13:51:08Z")
Hi Baker, what you described here is exactly what I am searching for, the demo is really nice! But unfortunately mouse events don’t work for that on my android phone. Do you have a solution for a draggable element also working on mobile phones in general? Hope you can help, Nadine ---
**Author:** ![kaitie\_o\_bryan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kaitie_o_bryan/32/2278_2.png) [@kaitie\_o\_bryan](https://forum.code.org/u/kaitie_o_bryan)\ **Post date:** [June 13, 2019, 4:21am UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/5 "2019-06-13T04:21:58Z")
Hi @nadine, This is a great question - have you tried e-mailing [support@code.org](mailto:support@code.org) about this question? I think the engineers there might be able to give you an answer on this one since it is a bit more technical. If you find out something helpful from them, please report back, I am interested in knowing this too! KT ---
**Author:** ![nilvednairb](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@nilvednairb](https://forum.code.org/u/nilvednairb)\ **Post date:** [July 6, 2020, 5:01pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/6 "2020-07-06T17:01:14Z")
I tried Baker’s code just now and it didn’t work very smoothly for me ('19-'20 AppLab, Mozilla, MacOS). I made [some changes](https://studio.code.org/projects/applab/sWR3FmvAU5AcNfCPpqcXmBR2LpZi0YquUc72Jcsb2Cg), mainly getting the screen to collect `mouseup` events. This version allows different elements to be dragged, and adding drag-ability to any UI element just requires a `mousedown` event handler. ---
**Author:** ![mmoylan](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@mmoylan](https://forum.code.org/u/mmoylan)\ **Post date:** [October 1, 2020, 10:57pm UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/7 "2020-10-01T22:57:26Z")
@nilvednairb I changed your code some, there was drift when dragging probably caused by race conditions. I made it so it just centers the object on the mouse while dragging. This may be a desireable side effect. [https://studio.code.org/projects/applab/QcScG0VVlyezGgvGsKvimBfOEDp57ND7s0Dd684X04s](https://studio.code.org/projects/applab/QcScG0VVlyezGgvGsKvimBfOEDp57ND7s0Dd684X04s) If it is not a desirable side effect I corrected for it. Though it makes code more complex. [https://studio.code.org/projects/applab/g3Q6so46nK07lxfzyjF2waEkbpsJ6Rs5oFX3Meb18PE](https://studio.code.org/projects/applab/g3Q6so46nK07lxfzyjF2waEkbpsJ6Rs5oFX3Meb18PE) ---
**Author:** ![immaTomato1](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/immatomato1/32/9755_2.png) [@immaTomato1](https://forum.code.org/u/immaTomato1)\ **Post date:** [February 26, 2026, 5:29am UTC](https://forum.code.org/t/is-there-a-way-to-code-a-drag-and-drop-behavior-on-an-image/13037/8 "2026-02-26T05:29:23Z")
This is an old post, but I believe it is useful. I myself stumbled upon this through googling, so for any future viewers, here’s what I coded. > **Unimportant rambling on what I actually did.** > > It is similar to the ones above, but I made a quick work around to the image dragging issue which is slightly more work to setup ui wise but takes away the jankiness of trying to drag images and is explained in the comments of my code. Its also easier to setup multiple draggable elements since everything is in functions though Im unsure how it may effect performance if used excessively. > > The drag’n’drop for the images works by putting an empty text label the exact same size over the image, which will be you draggable element (the ‘ele’ parameter in the functions). > > Along with this, I also added snapping so if you drop the element close enough to what you want to snap it with, it will snap there automatically. You can easily copy and paste the functions. You do have to call the function for every element you want to drag and drop. > > Add extra numbers to the if-statements if you need to add more or less leeway to snapping or want to modify placing. While a bit compact, the comments at the very least vaguely go over everything and the code is small enough that modifying it shouldnt be too hard. Linky: [App Lab - Code.org](https://studio.code.org/projects/applab/c0c95ad4-ee9a-4b91-aca8-daea14ba7cb6) Edit: it seems like it only works with a mouse. If you want touchscreen users, probably easier to tap to grab and place instead of drag and drop.