CODEWITHSUNDEEP
javascriptjquery
user775917
user775917

Reputation: 125

moving div according to mouse event and in the same direction

im trying to move the div according to mouse event and direction, i mean to move the div in the same direction, in which moves the mouse, but for the movement of div there will be limits. so far i have this:

    $("#foo").mousemove(function(event) {
        $("#bee1").animate({"left": "150px"}, 2000)
    });

and css:

#bee1 { position:absolute; top:200px; left:160px; }

now the div moves just in one direction, after the mouse is moved, and stops. but i want it to be moved in the way moves mouse, in the same direction )) how do i do it?! Thank you all for help!

Upvotes: 1

Views: 2095

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69905

I think you are looking for this

Working demo

$("#foo").mousemove(function(event) {
        $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92893

You can extract event.pageX and event.pageY every time mousemove is triggered. By storing these as global variables and comparing them to subsequent values, you can compute exactly what direction the mouse has been moved in and how far.

http://api.jquery.com/event.pageX/

Take the difference between the new and old values and feed them back directly into .animate if you like.

Upvotes: 0

Jim Wooley
Jim Wooley

Reputation: 10398

See http://www.thinqlinq.com/Post.aspx/Title/Select-Many-with-Rx-and-RxJs for an example using RxJs.

Upvotes: 0

Related Questions