What is the best way to Drag & Drop with js like the map in Google maps?

I am searching a light and powerful way to Drag & Drop contents like the map in Google Maps.

I already managed it, but I am not sure if it is the best way. I trapped the mouse (and touch) events, like mouse up, mouse down and mouse move, and changed every time the x and y position of every div-element (position:absolute). It works, but in most browsers on bigger screens, it isn't fluent.

So is开发者_如何学编程 there a way to do it more performant?

Second question: When I drag the contents and the mouse leave the browser window, it stopps dragging. Is there a solution to prevent this?

Thank you in advance!

Your basic approach is correct: you need to use mouse* event handlers to get the functionality you want. I have two ideas on how you might help the performance:

• Use the browser-specific events. IE (and possibly others) has a few of its own mouse events, in addition to the standard ones; using these might improve your IE-only performance (but I don't know for sure, so you'd have to experiment)

• Delegate events. If you have fifty elements that you are attaching event handlers to, it's going to eat up a lot of memory and affect performance. What you can do instead is attach those event handlers to a common parent element (eg. your "canvas" DIV) and then use the event details that get passed in to the handler to determine which element actually triggered the event. If you want to read up more on this, the basic principle is called event bubbling.

Those are just a couple of thoughts (the best I can do without more specifics); hope they help.

look at this library .
http://openlayers.org/ .
you can show some layers of data .