The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
$.event.special.drag 1.0.0
This is a jquery special event implementation of a drag event model. It is intended for use by developers who don't need one bloated script full of idiot-proof logic and a million different options. For people who plan a drag interaction model and decide how to set up pages and position elements, and don't need a script to figure that out...
To begin, let us look at the anatomy of a drag event model using standard DOM events...
1. "mousedown" - The user depresses a mouse button within the draggable element
2. "mousemove" - The user holds the mouse button and moves the mouse
3. "mouseup" - The user releases the mousebutton
Makes sense? Now consider the interesting moments of a drag interaction...
1. "dragstart" - Dragging begins, after the mouse has moved past some tolerance threshold
2. "drag" - The mouse is moving, element dragging
3. "dragend" - The dragging stops
This plugin simplifies all of this, by taking care of the DOM events when you bind a "drag" event handler, and triggering any other handlers at the appropriate time.
This plugin does NOT move elements! You have to do that yourself, but I think that is best in many cases (containment, snapping to a grid, axis restriction, and non-linear movement, to name a few). This plugin does update many helpful event properties for your use...
* event.dragTarget - The originating element of the drag event
* event.dragProxy - The proxy element or dragTarget
* event.cursorOffsetX - The horizontal difference between the click and element position
* event.cursorOffsetY - The vertical difference between the click and element position
* event.offsetX - The adjusted (by cursorOffset) dragged horizontal element position
* event.offsetY - The adjusted (by cursorOffset) dragged vertical element position
To achieve more complex behaviors, consider handling these relatively simple events.
* dragstart - return false to prevent drag, return an element, jquery collection, or selector string to set the proxy element which will be accessible from event.dragProxy, and will be considered for drop target tolerance
* drag - return false to prevent further dragging and immediately trigger "dragend"
* dragend - a drag callback
