Cursor position on draggable element

[Anonymous]

Attached below is simple jQuery function for dragging elements. Everything works as intended, with one exception…the position of the mouse cursor relative to the active element. The cursor moves to the center of the element immediately after the user begins to drag.

How can I configure this to keep the cursor in the same position the user drags from?

Sample Code: http://jsfiddle.net/YJ3S2/

[noahgelman]

@noob

Here you go comrade. Basically what I did was when you click the box, I get the mouse position and subtracted the offset of the box. This gives the offset of the mouse inside the box. Then when I move the mouse, I take the mouse position and subtract the offset.

In this way, wherever you click in the box and move it, it’ll stay there.

Code: http://jsfiddle.net/pu2kK/

IMPORTANT NOTE: If this takes place inside some element on the page, not just an empty page, you need will also need to also subtract the offset of whatever element it takes place in (lines 12 & 13).

[Anonymous]

@noahgelman

Awesome…thank you for the help!

Edit: one last thing…I’m attempting to make this work on touch devices, but my adjustments don’t seem to work. Essentially all I did was add touchstart, touchmove, touchend to the corresponding mouse events Any idea what I’m doing wrong?

Fiddle: http://jsfiddle.net/8r2jz/

[noahgelman]

I don’t know, I’m not a mobile person. I avoid it at all costs. Bane of my existence.

[Anonymous]

@noahgelman

Haha, gotcha. One last thing…

There seems to be a slight bug when the elements move from their starting position. If you mousedown then immediately release, the active element remains selected and will follow the mouse movement until you click to release it.

The behavior runs normal once the element has left the start position. By normal I mean the dragging behavior will only execute when the user continuously holds down the mouse button.

Any ideas how to correct this?

[noahgelman]

I see. That’s because you tied the mouseup function inside the mousemove function. So if you don’t move your mouse (which is basically just a click) the mouseup never runs.

We can solve that easily by splitting up the events like so: http://jsfiddle.net/d58JF/

I noticed another issue as well. The mouseup function is attached to the div. So if you release the mouse button during a brief time where the mouse isn’t over the div, it wont turn off.

You can replicate this by clicking near the edge of a div, dragging it around, then releasing it when the mouse is just ahead of the div.

To solve this we’re going to have to do a couple things. We’re editing from the jsfiddle at the top of my post. Here is the final version.

1. First we’re going to set $(this) as a variable. This way we can pass the div to places where $(this) might be something else.
2. Replace the $(this) values with the variable.
3. You remember the mouseup function we have? Well we’re going to change the scope from $(this) or $this to $(‘body’). The reason we do this is that no matter where on the page we lift the mouse button, it will always reset the div the way we want. Inside we now have $this instead of $(this). We remove the active class from it.
4. We now want unbind this mouseup we put on the body. Else it would run on all future mouseup actions.

I hope that all makes sense. Let me know if you have any questions.

[Anonymous]

Wow! Thank you very much for the in depth explanation…helped me a ton. Cheers

[noahgelman]

No problem, as long as you understand what the code is doing. I wrote the explanation in between work so I just wanted to make sure I was clear

[Anonymous]

@noahgelman

The explanation was fine. I really appreciate when people explain their reasoning when posting code samples…as apposed to copy/pasting haphazardly.

So I’ve been experimenting with the final version you posted in hopes of achieving an animated/inertia feel when the user drags an element. For starters, I added a 400ms transition to the active class via css. The transition is noticeable, but the output is quite jarring.

Do you have any tips for fixing/enhancing the result?

Updated: http://jsfiddle.net/bwELE/2/

Thanks

[noahgelman]

Well the mousemove function runs a LOT of times as you move the div. So if you move a div down something like a 100px the mousemove function can trigger dozens of times depending on how fast you move it.

So when you put a 400ms transition you’re basically saying that every time the mousemove triggers, you want the animation to take .4 seconds. Thats a LONG time when you’re doing dozens in less than a second.

So what you can do is just bump the miliseconds down. Try somewhere between 30-60ms.

[Author]

Posts