jQuery: How to write a function on click, hold and move?

Question

I started learning jQuery just yesterday, and I like it very much.

And now I decided to write a script where I can change the margin-left of an image when I click on it, hold the clicking and move the mouse.

Depending on mouse coordinates I must change the image's margin-left. Could you give me an idea how I can do it? Thanks.

Answer 1

I am not sure I understand completely but it sounds like you want the draggable functionality of jQuery UI.

http://jqueryui.com/demos/draggable/

Answer 2

Check out jQueryUI (http://jqueryui.com/)

Specifically, look at the "Draggable" http://jqueryui.com/demos/draggable/). That will allow you to check where the item is on the screen as well as letting you attach all sorts of other events.

Good luck!

Answer 3

You can register events for onmousedown and onmouseup, and compare the mouse position differences in each of these. Both those event functions get passed an event object as an argument, which has attributes for clientX and clientY, indicating the position of the mouse at the time of the event.

http://www.w3schools.com/jsref/dom_obj_event.asp