How to drag and drop divs with jQuery without using jQuery UI?

Question

I am trying to learn jQuery and i want to move divs with the class .drag. and not outside a div with the ID #siteHolder

I don't want to use jQuery UI at the moment.

Any tips and tutorials would be nice.

Answer 1

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).

The speed difference is more visible with slower CPU's. Also, due to JavaScript engine optimizations in the last generation browsers, the speed difference is less than with older browsers. For example, the difference 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.

Plug-In

Answer 2

You can manually implement it processing the mouse move and down events.

• On mouse down mark object as being dragged
• On mouse move calculate the offset from the last cursor position and move the dragged object but checking before that the new position is inside the container box.

You can get inspiration from the jquery ui code in case you need.