Question

I know how to implement the drag and drop effect in JavaScript,but I found that in some site,the speed of the drag and drop operation will cause different result.

Take the Google map for example,the map view is draggable ,when you drag the map slowly,the map will move with your mouse ,however if you drag the map very fast and then drop the mouse,the map will keep moving (a limited distance),it seems that it has a buffer distance.

I wonder how to make it?

Answer 1

There is no vanilla effect for that, unfortunately.

You will have to count various parameters such as distance, direction and time that it took to complete the drag.

Then depending on the results you can compute a bezier curve and extend the animation so that it seems seamless and smooth.

Here’s an example…
http://jsfiddle.net/an44z/

It works, if maybe not that well (written hastily for an old project, but it might give you a good idea of what is happening – should be happening).

EDIT: Alternatively you can study this mooTools example since it is pretty much exactly what you’re after.
http://mootools.net/demos/?demo=Drag.Scroll