ppDrag

Extremely Fast JavaScript Drag'n'Drop

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI's Draggable. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance). Drag the two boxes below while watching your CPU usage to see the differences in their speed:

The speed difference is more visible with slower CPU's. If you have a fast processor which supports SpeedStep or a similar technology, you can try lowering its frequency. Also, due to JavaScript engine optimizations in the last generation browsers, the speed difference is less than with older browsers. For example, it is greater with Firefox 2 than with Firefox 3.

All major existing browsers are supported. This includes IE6/7, Firefox1/2/3, Opera, Konqueror, Safari, and probably others.

Download:

ppDrag is licensed under the LGPL license

Latest version (0.2): jquery.ppdrag.js
All downloads: http://code.google.com/p/ppdrag/downloads/list
Subversion: http://code.google.com/p/ppdrag/source/checkout

Usage:

1. Include jQuery:
   <script src="jquery.js" type="text/javascript"></script>
2. Include ppDrag:
   <script src="jquery.ppdrag.js" type="text/javascript"></script>
3. Activate ppDrag. Example:
   $(document).ready(function() {
       $("#element1").ppdrag();
   });
   
   Note: at the moment ppDrag doesn't support elements with static positioning. Please use either relative, absolute, or fixed positioning.
4. (optional) Specify options. Example:
   $(document).ready(function() {
       $("#element2").ppdrag({ zIndex: 1000 });
   });
   
5. (optional) When no longer needed, you can deactivate ppDrag. Example:
   $("#element2").ppdrag("destroy");
   

Supported options:

• zIndex: [integer] z-index for the element while being dragged.
• stop: [function(element)] Function that gets called when dragging stops.

History:

• Version 0.1 (2008-04-03):
  Initial release
• Version 0.2 (2008-08-26):
  Fixed cancelling IE's default event action didn't work;
  Callbacks (only 'stop' for now) receive the element both as 'this' and as an argument, just like jQuery UI Draggable;
  Updated jQuery UI version used in this demo to 1.5.2. It has received many optimizations and is now signifficantly faster than before (though still not as fast as ppDrag);

ToDo:

• Seems like IE's default actions are not prevented properly while handling mouse events. Investigate and fix.
• Add support for start and drag callbacks
• Add explicit support for static-positioned elements (currently supported are absolute, relative, fixed)
• Add support for more of jQuery UI Draggable's options
• (possibly) Add Droppables

Contact:

Copyright (c) 2008, Peter Petrov
The author can be contacted at email: ppetrov(at)ppetrov.com

Bugs and feature requests should be reported at the issue tracker.

Privacy Policy