jquery.event.drag / Demos
The following examples are intended to show how the drag special events can be
configured to acheive a wide range of features for any drag interaction. I have
simplified each demo as much as possible, to really highlight the core of each
feature. If you have any problems, or want to suggest a new feature, or a new
demo, please contact me via the
ThreeDubMedia Google Group.
One of the simplest ways to create a drag interaction, with the "drag" method.
A simple drag operation using the relative option.
A way to restrict movement in one dimension.
A technique for restricting movement to a grid.
A technique for restricting movement to a container.
Using trigonometry to restrict movement to a circular path.
Using the "bind" data parameter and the "handle" option.
Using the "dragstart" and "dragend" events to toggle an "active" drag state.
Using the "dragstart" handler to return a proxy element.
Using the "dragstart" handler to ensure the dragged element is on top.
Using the "startX" and "startY" properties to restore starting position.
Using the "draginit" handler to return multiple elements.
Setting a fixed element offset for dragged elements.
Using "live" event delegation with "drag" events.
Using the "which" option to target a specific mouse button.
Using the "click" option to allow a click to propagate after dragging.
Using the "not" option to prevent dragging by selector expression.
Using the "distance" option to prevent dragging until a pixel threshold has been crossed.
Using the "deltaX" and "deltaY" properties to resize an element.
A complex example showing resize in 8 directions with multiple elements.
Using the drag events to manipulate a canvas element.