Documentation

• Terminology
• DraggableElement (constructor)
  • Options
  • ( … ).isInstance
• DraggableElement.prototype
  • ( … ).element
  • ( … ).config
  • ( … ).destroy
  • ( … ).updateCSS
• Events
  • DragInitEvent
  • DragStartEvent
  • DragMoveEvent
  • DragEndEvent
  • DragFrameEvent
  • DragDoneEvent
• Inertia

DraggableElement	DraggableElement (no space and caps) refers to the DraggableElement constructor. See DraggableElement for more information about this constructor and the objects it creates.
draggable element	A draggable element (with space) refers to an element that has become draggable using the DraggableElement constructor. Note that it is not an instanceof DraggableElement, it still just a regular HTML element that also happens to be draggable by the user.
.draggableElement	Each draggable element inherits this property that refers to the DraggableElement object associated with that element. This object is an instanceof the DraggableElement constructor. See DraggableElement.prototype for more information about this property.

Desc:	Constructor that instantiates a new draggable element. There are three ways to call this constructor shown in the syntax area below.
Type:	Constructor
Returns:	DraggableElement object or element called upon, depending on how it is called
Syntax:	new DraggableElement(elem, [args]); // Returns DraggableElement object DraggableElement(elem, [args]); // Returns DraggableElement object elem.draggableElement([args]); // Return element called upon
Values:	elem Element to be converted to a draggable element. Must inherit from HTMLElement (Must be direct or indirect descendant of document). args JSON object with key value pairs determining the options for the draggable element. See Options for valid keys and values.
Example:	1 document.getElementById("myElement").draggableElement({inertia: true}); All three statements above accomplish the same task: #myElement becomes a draggable element. The first two statements will return the DraggableElement object that is created while the third statement will return the element that it was called upon.

When using the .draggableElement method on an element, a JSON object can be passed as an argument to instantiate the draggable element with certain settings that affect its behavior. Below are some key-value pairs that can be included in the JSON object. Any keys not in the list below will be ignored. Note that keys are case-sensitive and always appear in camelCase format.

bounds	Type: Array, Element, or String Default: [-Infinity, -Infinity, Infinity, Infinity] Desc: Determines the bounding box for the draggable element to remain in while being dragged. ‣ If Array, must be of the form [left, top, right, bottom], where each array element is a number in pixels from the top of the top left of the document. Note that resizing by the user may cause this bounding box to shrink or grow more than you want since each number is measured in absolute pixels. In this case, add a resize event listener in your code to accommodate for this and update the bounds to the necessary amount. ‣ If Element, the bounding box of the element will be used as the boundaries (using the .getBoundingClientRect method). Window resizing is taken into account: when the window is resized, the boundaries are updated and the element is moved if necessary to keep it inside the bounds. To ensure that the element is exactly where you want it however, it is recommended to add your own resize listener to update the element's position manually. ‣ If String, must be one of two values: "parent" or "body". "parent" will be evaluated as the element's parent node and prevents it from leaving the parent's bounding box. "body" will be evaluated as document.body and prevents it from going off screen or expanding an existing element's size.
css	Type: Object Default: {} Desc: Defines any CSS that should be applied to the element while it is being dragged. Use {cssProperty: valueForThatProperty} to define any CSS changes. After being released, it will return to its old CSS, which is gathered when the draggable element is first instantiated. To update its CSS that it should return to, use the .updateCSS method on the element. The following CSS properties are ignored: top, left, bottom, right, position, and cursor. To alter the cursor to be used, use the cursor option.
cursor	Type: String or Boolean Default: "move", "ns-resize", or "ew-resize" depending on the active axes Desc: Defines what cursor should appear on the element while being dragged. The entire <html> element also receives this cursor style. After the element is released, the default cursors are restored for both the element and the <html> element. ‣ If String, that string is used for the cursor. Click here for a list of cursors that can be applied. If the string is not any of these, the cursor style will not be applied. ‣ If Boolean, defines whether the cursor should be changed at all. false will not alter the cursor styling at all while true will use the default values.
dependents	Type: Array, NodeList, HTMLCollection, or Element Default: [] Desc: Defines any elements that should be moved alongside the draggable element and mirror its movements. Each time the draggable element is moved, its dependents also move the same amount. Dependents can be outside of the draggable element's bounding box and will still mirror the movement of the draggable element. Note that on window resizing, the dependents are moved the same amount that the draggable elements are moved. It is recommended that you add your own resizing event handler to manually position the dependents to the correct location.
doX	Type: Boolean Default: true Desc: Indicates whether or not the element should be draggable horizontally. If false, the element will have an "ns-resize" cursor and will not be able to move side to side.
doY	Type: Boolean Default: true Desc: Indicates whether or not the element should be draggable vertically. If false, the element will have an "ew-resize" cursor and will not be able to move up and down.
inertia	Type: Boolean Default: false Desc: Indicates whether or not the element will have inertia. See Inertia for more information on the behavior of this option.
inertiaCollision	Type: String Default: "bounce" Desc: Dictates what happens when the element collides with a boundary while in its inertia state. If the user is still dragging and hasn't released the element (i.e. the element is still in its dragging state), the element will remain at the cursor's position. If inertia is disabled, this option has no effect. ‣ If "bounce", the element will bounce off the wall in the opposite direction it collided in. Works similar to how a mirror reflects light. ‣ If "slide", the element will slide along the wall it collided into. Works similar to "bounce" except the element will stay adjacent to the wall. ‣ If "stop", the element will completely halt once it collides with a boundary. If a 'done' callback is applied, the callback will be invoked right when it collides.
inertiaResistance	Type: Number Default: 1 Desc: Affects how resistant the element is to slowing down while in its inertia state. If inertia is disabled, this option has no effect. The number must be in a range between 0–2.5. 0 is the same as having no inertia; the element will stop as soon as it is released. 2.5 is the same as having no friction to slow the element; it will move at the same speed forever or until grabbed again by the user. If the number is outside the range, it will automatically be put into the range depending on which number it is closest to. See Inertia for more information on how resistance affects the element's behavior.
inertiaThreshold	Type: Number Default: 5 Desc: After the user releases an element, all the movements in the last 120 milliseconds are gathered and evaluated. If at least one of their distances (measured using Chebyshev Distance) exceeds the inertiaThreshold, then inertia is applied to the element. Otherwise, the element will remain stationary after being released and the 'done' callback is not invoked. This is to prevent small movements from activating the inertia state. A higher inertiaThreshold will force the user to move faster to apply the inertia.
keepSelection	Type: Boolean Default: false Desc: When a draggable element is moved, by default the user may also accidentally highlight certain elements because they are dragging the cursor over them. If this property is set to false, the selection is removed each time the element is moved to prevent accidental highlighting. Set to true to keep the default highlighting behavior.
init	Type: Function Default: null Desc: Function to be called after the element has been instantiated. This callback function will only run once right after all the default properties for the new draggable element have been defined and it is ready to be dragged. Receives one argument: DragInitEvent.
start	Type: Function Default: null Desc: Function to be called each time the user starts a new drag. This callback function may be called more than once depending on how many times the user drags the element. Receives three arguments: DragStartEvent, the original mouse or touch event that started the drag, and a function callback. The callback, when called, will cancel the user's drag and prevent them from moving the element. No other callbacks are called and the element simply isn't allowed to drag until the user tries again. This allows you to decide in the start callback whether or not the user should be allowed to drag.
move	Type: Function Default: null Desc: Function to be called each time the user moves the draggable element at least one pixel. This function may be called hundreds of times per drag, or may not be called at all if the user doesn't move the element at least one pixel while dragging. Receives two arguments: DragMoveEvent, and the original mouse or touch move event that caused the element to be dragged.
end	Type: Function Default: null Desc: Function to be called once the user releases the draggable element and ends its dragging state. If the draggable element has no inertia applied to it, this is the last event that will be fired before starting again and calling the start callback. Otherwise, two other events are also fired as shown below. Receives three arguments: DragEndEvent, the original mouse or touch event that ended the dragging, and a callable function that will prevent inertia from starting if invoked. If inertia is not applied to the element, the function does nothing. The third argument is meant for you to allow, or disallow inertia from taking place, based on any calculations made in this function.
frame	Type: Function Default: null Desc: Function to be called for each "frame" of inertia that takes place about every 25 milliseconds. Each frame of inertia moves the element a certain distance and calls this function after the element has been moved. This function may be called hundreds of time if the user gave the element sufficient speed, or may not be called at all if inertia is never triggered. This callback function is only invoked if inertia is enabled for the element. Receives two arguments: DragFrameEvent, and a function that, when invoked, will end the inertia earlier than planned. This allows you to control how long inertia lasts based on any calculations made in this function.
done	Type: Function Default: null Desc: Function to be called after the element has finished its inertia state and is completely done moving. This function is only called once, even if inertia never actually took place. If this is the case, it is called immediately after the end event. This callback function is only invoked if inertia is enabled for the element. Receives one argument: DragDoneEvent. This argument contains information pertaining to whether the element actually entered its inertia state, whether the user grabbed the element again before it came to a complete stop, and other information about the element.

Any keys not in the table above will be ignored when instantiating the draggable element. Any keys that are not of the correct type will either raise an error along the way, or just not function as they are supposed to.

Desc:	Function that determines whether an element is considered a draggable element (i.e. its .draggableElement property is an instanceof DraggableElement).
Type:	Function
Returns:	Boolean indicating whether the element is a draggable element.
Syntax:	DraggableElement.isInstance(elem); ;
Values:	elem Element to be tested.
Example:	1 DraggableElement.isInstance(document.getElementById("myElement")); Determines whether #myElement is a draggable element.

On instantiation as a draggable element, an HTMLElement inherits a .draggableElement property that replaces its original .draggableElement method (shown in use here). Once that property has been replaced, it becomes an instance of DraggableElement and inherits from its prototype. Below are the methods and properties associated with its prototype. You can call these properties directly from the draggable element's .draggableElement object property. See the examples below to see how you can use these properties and methods.

Desc:	Provides a reference to the draggable element that this DraggableElement object is associated with and helps with chaining JavaScript statements together.
Type:	HTMLElement
Syntax:	elem.draggableElement.element; // Will return elem
Values:	elem Draggable element that will be returned.
Example:	1 document.getElementById("myElement").draggableElement.element === document.getElementById("myElement"); The above statement will always return true.

Desc:	Object used to overwrite a draggable element's current settings.
Type:	Object
Syntax:	elem.draggableElement.config[setting]; // Get setting elem.draggableElement.config[setting] = value; // Set setting
Values:	elem Draggable element to change setting for. setting Any key from Options to get or set value for. value If changing an option, this is the desired value for the option you are changing. After changing the value, it is evaluated to check if it is valid for that option. If the value provided is not valid, then the actual configuration for the draggable element is never changed. Attempting to get the same property after setting it will reveal what value the draggable element actually has. For example, if you set the inertia of a draggable element to '1', when you try to get the same property, it will return as true instead of '1' because that was what it was evaluated to.
Example:	1 document.getElementById("myElement").draggableElement.config.inertiaResistance = "10"; 2 document.getElementById("myElement").draggableElement.config.inertiaResistance; // Returns 2.5 Gets element with id "myElement" and attempts to change its inertiaResistance to '10'. First, the string is turned into a number. Then it is lowered to the maximum value for inertiaResistance: 2.5. When you try to get the property in line 2, it returns the evaluated value, which is 2.5 as a number instead of as a string.

Desc:	Method used to remove the Dragabble Element's ability to be dragged. Does not destroy the element. The element can be re-instantiated using the same methods as described here.
Type:	Function
Returns:	Element called upon
Syntax:	elem.draggableElement.destroy();
Values:	elem draggable element to remove dragging ability from.
Example:	1 document.getElementById("myElement").draggableElement.destroy(); Remove the dragging ability from #myElement. To make it draggable again, use the DraggableElement constructor on it again.

Desc:	This method only applies to a draggable element using the css option. When an element is using this option, it temporarily takes on a desired css style as defined in the css option. Once the element is released, it reverts to any css styles recorded and saved on the element. When the element is instantiated using the DraggableElement constructor, its CSS is recorded, frozen, and stored for later use so that it may revert back to this css. Sometimes though, you may not want it to revert back to the CSS recorded when the element is instantiated. This method allows you to discard any saved CSS and record the element's current CSS (at the time this method is called). The next time the user releases that draggable element, it's CSS style will take on what was recorded. It is recommended that you call this method in the start event callback if your element is changing its style constantly, so as to return to the same style before its drag began.
Type:	Function
Returns:	The calculated CSS as a JSON object (frozen clone of what getComputedStyle returns)
Syntax:	elem.draggableElement.updateCSS();
Values:	elem The element to record the CSS for
Example:	1 document.getElementById("myElement").draggableElement.updateCSS(); Records the current CSS applied to #myElement. The next time the user releases the element, any changed CSS will revert back to what was just recorded.

There are six total events that pertain to a draggable element. The order in which they are fired is as follows: Init, Start, Move, End, Frame, and Done. The last two, Frame and Done, are only fired if the draggable element has inertia enabled. You can configure a callback for each event that will be called only when that event fires. Those callbacks each receive at least one argument that will always include information about the event. Below are the constructors used for the instantiation of said arguments along with the information they include.

Desc:	The first argument passed to the init callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that was instantiated. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with only a single 'init' key. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. type String with value "draginit".
Example:	1 function (dragInitEvent) { 2 console.log(dragInitEvent); 3 }; A function that, when assigned to the init callback, will output all the properties of the DragInitEvent to the console.

Desc:	The first argument passed to the start callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that the user is targetting. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with two keys: 'init' and 'start'. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). ‣ start — A JSON object with similar keys to the that of the init JSON object: 'x', 'y', and 'timestamp', that apply to when the user started the drag. timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. type String with value "dragstart".
Example:	1 function (dragStartEvent) { 2 console.log(dragStartEvent); 3 }; A function that, when assigned to the start callback, will output all the properties of the DragStartEvent to the console.

Desc:	The first argument passed to the move callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that the user is targetting. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with two keys: 'init', 'start', and 'move'. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). ‣ start — A JSON object with similar keys to the that of the init JSON object: 'x', 'y', and 'timestamp', that apply to when the user started the drag. ‣ move — An Array of JSON objects, with each item in the array representing a move event fired by the user. This value is compiled into an array since more than one move event may be fired per drag. The array contains a 'last' property (( … ).coordinates.move.last) that represents the last item in the array for quicker access. Each object in the array is similar to the JSON object of the init and start keys, except that they have an extra key: 'distance'. This key (as you probably guessed) contains the distance between the current location and the previous location before the move event was fired and is represented as a JSON object with 'x' and 'y' keys. distance The distance of the last movement (shortcut for coordinates.move.last.distance). timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. type String with value "dragmove".
Example:	1 function (dragMoveEvent) { 2 console.log(dragMoveEvent); 3 }; A function that, when assigned to the move callback, will output all the properties of the DragMoveEvent to the console.

Desc:	The first argument passed to the end callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that the user is targetting. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with four keys: 'init', 'start', 'move', 'end'. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). ‣ start — A JSON object with similar keys to the that of the init JSON object: 'x', 'y', and 'timestamp', that apply to when the user started the drag. ‣ move — An Array of JSON objects, with each item in the array representing a move event fired by the user. This value is compiled into an array since more than one move event may be fired per drag. The array contains a 'last' property (( … ).coordinates.move.last) that represents the last item in the array for quicker access. Each object in the array is similar to the JSON object of the init and start keys, except that they have an extra key: 'distance'. This key (as you probably guessed) contains the distance between the current location and the previous location before the move event was fired and is represented as a JSON object with 'x' and 'y' keys. ‣ end — A JSON object with four keys: 'x', 'y', 'timestamp', and 'distance'. distance The distance between the end event and the last move event (shortcut for coordinates.end.distance). endDistance The distance between the end event and the start event (i.e. how far the element moved while it was being dragged by the user). endTime The total time in milliseconds that the element was being dragged by the user (end event's timestamp − start event's timestamp). timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. hasInertia Boolean indicating whether inertia will be triggered for the element (i.e. the user was moving fast enough to trigger it and the element has its inertia enabled). type String with value "dragend".
Example:	1 function (dragEndEvent) { 2 console.log(dragEndEvent); 3 }; A function that, when assigned to the end callback, will output all the properties of the DragEndEvent to the console.

Desc:	The first argument passed to the frame callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that the user is targetting. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with four keys: 'init', 'start', 'move', 'end'. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). ‣ start — A JSON object with similar keys to the that of the init JSON object: 'x', 'y', and 'timestamp', that apply to when the user started the drag. ‣ move — An Array of JSON objects, with each item in the array representing a move event fired by the user. This value is compiled into an array since more than one move event may be fired per drag. The array contains a 'last' property (( … ).coordinates.move.last) that represents the last item in the array for quicker access. Each object in the array is similar to the JSON object of the init and start keys, except that they have an extra key: 'distance'. This key (as you probably guessed) contains the distance between the current location and the previous location before the move event was fired and is represented as a JSON object with 'x' and 'y' keys. ‣ end — A JSON object with four keys: 'x', 'y', 'timestamp', and 'distance'. ‣ frame — An Array of JSON objects with four keys: 'x', 'y', 'timestamp', and 'distance'. The Array is similar to that of move. It also contains a 'last' property to access the last item in the Array. The distance key is the measure between the coordinates of the current frame event and the previous frame event. distance The distance between the current frame event and the last frame event (or the end event, if this is the first frame event) (shortcut for coordinates.frame.last.distance). endDistance The distance between the end event and the start event (i.e. how far the element moved while it was being dragged by the user). endTime The total time in milliseconds that the element was being dragged by the user (end event's timestamp − start event's timestamp). timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. direction The current direction the element is going represented as a JSON object with 'x' and 'y' keys. Each value is a number in pixels. The next frame event will use these values to determine where the element should go ([value] * 0.4 * inertiaResistance). These values are usually the same as coordinates.frame.last.distance, except when the element collides with a boundary. Using these values along with the second argument to the frame callback, you can manually set up a point for inertia to stop. type String with value "dragframe".
Example:	1 function (dragFrameEvent) { 2 console.log(dragFrameEvent); 3 }; A function that, when assigned to the frame callback, will output all the properties of the DragFrameEvent to the console.

Desc:	The first argument passed to the done callback if one is defined. Contains basic information about the draggable element that the callback can access.
Type:	Object
Properties:	target The draggable element that the user is targetting. bounds The bounding box for the draggable element represented as a four element Array. callbacks Any callbacks defined for the draggable element represented as a JSON object with six keys: init, start, move, end, frame, done. Each key's value is the callback function associated with that event, or null if a callback is not defined. axes A JSON object specifying which axes are currently enabled for the draggable element. There are keys 'x' and 'y', each with a boolean value indicating whether that axis is enabled. coordinates A JSON object with four keys: 'init', 'start', 'move', 'end'. ‣ init — A JSON object with three keys: 'x', 'y', and 'timestamp'. The 'x' and 'y' keys each represent the coordinates of the element at the time it was instantiated as a draggable element. This can serve as a reference in later event callbacks. The timestamp is the time in milliseconds that the event was fired. It uses performance.now() for its measurement, only if it is supported by the browser. Otherwise, it will be measured using Date.getTime(). ‣ start — A JSON object with similar keys to the that of the init JSON object: 'x', 'y', and 'timestamp', that apply to when the user started the drag. ‣ move — An Array of JSON objects, with each item in the array representing a move event fired by the user. This value is compiled into an array since more than one move event may be fired per drag. The array contains a 'last' property (( … ).coordinates.move.last) that represents the last item in the array for quicker access. Each object in the array is similar to the JSON object of the init and start keys, except that they have an extra key: 'distance'. This key (as you probably guessed) contains the distance between the current location and the previous location before the move event was fired and is represented as a JSON object with 'x' and 'y' keys. ‣ end — A JSON object with four keys: 'x', 'y', 'timestamp', and 'distance'. ‣ frame — An Array of JSON objects with four keys: 'x', 'y', 'timestamp', and 'distance'. The Array is similar to that of move. It also contains a 'last' property to access the last item in the Array. The distance key is the measure between the coordinates of the current frame event and the previous frame event. ‣ done — A JSON object with 'x', 'y', 'timestamp', and 'distance' keys. Distance is the measure between the done event and the last frame event. distance The distance between the current done event and the last frame event (shortcut for coordinates.done.distance). endDistance The distance between the end event and the start event (i.e. how far the element moved while it was being dragged by the user). endTime The total time in milliseconds that the element was being dragged by the user (end event's timestamp − start event's timestamp). doneDistance The distance between the done event and the start event. doneTime The total time in milliseconds that the element was being dragged by the user (done event's timestamp − start event's timestamp). brokeThreshold Boolean indicating whether the user was moving fast enough to break the inertiaThreshold and trigger the element's inertia state (see Inertia for more info on inertiaThreshold). interrupted Boolean indicating whether the user re-grabbed the element while it was still moving from inertia. If true, the element is being held down by the user when the done callback is called. timestamp Time in milliseconds indicating when the event occurred using performance.now() or Date.getTime() depending on browser compatibility. direction The current direction the element is going represented as a JSON object with 'x' and 'y' keys. Each value is a number in pixels. The next frame event will use these values to determine where the element should go ([value] * 0.4 * inertiaResistance). These values are usually the same as coordinates.frame.last.distance, except when the element collides with a boundary. Using these values along with the second argument to the frame callback, you can manually set up a point for inertia to stop. type String with value "dragdone".
Example:	1 function (dragDoneEvent) { 2 console.log(dragDoneEvent); 3 }; A function that, when assigned to the done callback, will output all the properties of the DragDoneEvent to the console.

Inertia is a toggleable option for a draggable element. When a user is dragging an element around, if he/she released the element while it was still moving, that element will go into its inertia state in which it will continue going the direction it was released in and gradually come to a stop. On the home page, there is a small demo box that can be dragged and moved around. If you drag it and release the box while you are still moving your cursor (or finger), the box will not stop as soon as you release. Instead, it will continue moving and even bounce of the walls if it collides with one. Another option you can configure is how resistant the element is to slowing down while in its inertia state. An element's speed at any given moment can be calculated using the formula f(v, r, t) = v × (0.4 × r)^t ∕ 25 where v = speed of the element when released, r = inertiaResistance, and t = time in milliseconds since the element was released.

The chart above shows the deceleration of the element. Hover over one of the plots to see the value for that plot. The X represents the number of milliseconds since the element was released (t) and the Y represents the speed the element will be traveling at that point in time. The Y is measured in terms of v. So speed starts at 1v and slows down to 0v. Inertia Resistance (r) can be changed to see how that factor will affect the speed by moving the blue box with the number in it. At r = 0, the element will stop immediately upon entering its inertia state while r = 2.5 will force the element to maintain the same speed indefinitely.

An element is considered "done moving" once its speed reaches 0.1px/25ms in both the x and y axis. After it reaches this speed, the element settles and the 'done' callback is called if one is defined. The time span of an element's inertia state (the time between when the user releases the element and when the element is done moving) can be measured using the formula t = log_{(0.4 × r)}(0.1 ∕ v) × 25. This formula would get the exact millisecond that the element should stop, but since JavaScript doesn't run setInterval functions only 1 millisecond apart, each "frame" of inertia is 25 milliseconds apart. As such, the actual formula for the inertia time would be t = ceil( log_{(0.4 × r)}(0.1 ∕ v) ) × 25. This formula will return the proper value for t.

The inertiaThreshold of an element can also affect the behavior of that element. Instead of affecting speed however, the inertiaThreshold affects whether inertia will be applied to that element in the first place. Basically, inertiaThreshold says how sensitive the element is to triggering its inertia. When the user releases the element, any movements in the last 120 milliseconds are gathered. The movements' distances are then compared again the inertiaThreshold. If the distance in either axis exceeds this value, then inertia is triggered. This is to prevent the user from moving only a single pixel at the end of his/her movement and triggering inertia for such an insignificant value. By default, at least one of the user's movements have to exceed 5 pixels. Of course you can prevent this behavior by setting the draggable element's inertiaThreshold to a value <=0. This will cause any movement at least one pixel in distance to trigger inertia, as long as it occurs in the last 120 milliseconds before the element is released. Check out these two demos to compare how inertiaThreshold can affect the behavior of the element's inertia: Threshold=1, Threshold=250.

If there are boundaries on an element (bounds option) and inertia is toggled on, what happens when an element collides with a boundary. This is also a configurable setting under inertiaCollision. There are a total of three values this option can accept: "bounce", "slide", and "stop". If configured with "bounce" (Demo), an element will, as you guessed, bounce off a wall. If an element was traveling diagonally and it collides with its left boundary, its 'x' movement will be negated so that it travels in the opposite x direction. Its 'y' movement will be unaffected so that, when the two are combined, the element seems to reflect off the wall and looks like it is bouncing off of it. The "slide" value (Demo) is similar. If the same element were configured with "slide" instead of "bounce", the 'x' movement would not be negated. Instead, it would be set to 0 so that it is no longer moving horizontally. Its 'y' value would again remain the same. This creates the effect that the element is sliding alongside the wall. This can continue until it slows down and stops naturally, or it collides with the top or bottom corner of the bounding box. If it collides with a corner, the element will stop completely since it can no longer slide along the same wall. If any of the draggable element's axes are turned off (doX or doY) when it collides with a wall, it will not be able to slide, since it will be a head-on collision and not have any movement in the other axis. This is similar to the "stop" value (Demo). With the "stop" value, when an element collides with one of it boundaries, it stops altogether. Both axes' movements become 0 and its inertia state ends there. If you have any ideas for anything you might want added or changed, make a suggestion or fork me on GitHub.