Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Navigation

jQuery DragPan

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery DragPan - CodeCanyon Item for Sale


Ad: Bluehost hosting


Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creating maps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.


  • Very few images, mostly CSS
  • Includes 22 different customizable options and 3 callbacks
  • Function to move map to position
  • Doesn’t stop user from dragging beyond map, just bounces back till the whole map fills the screen
  • Scrollbars (Colour changable using CSS )
  • Copyright/help message (You choose the message)
  • Restrict to horizontal/vertical panning
  • Customize grab/grabbing cursor
  • Change return animation speed
  • NEW – Modify inertia after releasing
  • NEW – Restrict dragging to the viewport

Update 1.1

  • Added inertia options
  • Added ability to restrict map to viewport
  • Bug fixes

In The Wild (Examples)

If you use this script on your site/in an app then let me know, I will add a link to it here.

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


10 September 12

Last Update:
17 October 12

Compatible Browsers:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS, Layered PNG

Software Version:


eCommerce, eCommerce, All Items, drag, landmark, map, pan, panning, responsive, touch