• page

jQuery.event.drag jQuery.event.drag


jQuery.event.drag provides drag events for jQuery. A jQuery.Drag instance is created on a drag and passed as a parameter to the drag event handlers. By calling methods on the drag event, you can alter the drag's behavior.

Drag Events

The drag plugin allows you to listen to the following events:

Just by binding on one of these events, you make the element dragable. You can change the behavior of the drag by calling methods on the drag object passed to the event handler.


Here's a quick example:

//makes the drag vertical
$(".drags").on("draginit", function(event, drag){
//gets the position of the drag and uses that to set the width
//of an element
$(".resize").on("dragmove",function(event, drag){
  $(this).width(drag.location.x() - $(this).offset().left   )

Drag Object

The drag object is passed after the event to drag event callback functions. By calling methods and changing the properties of the drag object, you can alter how the drag behaves.

The drag properties and methods:

  • cancel - stops the drag motion from happening*
  • ghost - copys the draggable and drags the cloned element*
  • horizontal - limits the scroll to horizontal movement*
  • location - where the drag should be on the screen*
  • mouseElementPosition - where the mouse should be on the drag*
  • only - only have drags, no drops*
  • representative - move another element in place of this element*
  • revert - animate the drag back to its position*
  • vertical - limit the drag to vertical movement*
  • limit - limit the drag within an element (limit plugin)
  • scrolls - scroll scrollable areas when dragging near their boundries (scroll plugin)


Now lets see some examples: