The window.__drag class takes care of initializing and raising the three events of a drag movement of a given HTML element. This events are ‘down’, ‘move’ and ‘up’.
This library, in addition to defining the class window.__drag, also exposes the functions:

window .__ dragElement to visually drag an HTML element
window .__dragList to move <LI> tags up and down
window .__dropElement to simulate a drop of the element inside another

Drag initialize both mouse events and touch events.
This is not related with the Drag and Drop API.

__drag

parameters

element
An html element
options

Option	Type	Description
preventMouseOut	Boolean	If setted on `true`, an element with z-index:9 will be appended to the document. Useful when drag over iframes. Default to `false`.
onlyHandler	Boolean	If `true`, children of the main element will not raise events. Default to `false`.
handle	Css selector	If specified, restricts dragging from starting unless the mouse or touch event occurs on the specified element(s). Default to `null`.
grabbingClass	String	Specify a class selector to be associated when the element is moved with the mouse. Default to `__drag-cursor-grabbing`

Usage

parameters

    let d = __drag(document.getElementsByTagName("main")[0]);
    d.on("down",e=>console.log("down ->",e));
    d.on("move",e=>console.log("move ->",e));
    d.on("up",e=>console.log("up ->",e));

See the live example.

__dragElement

Parameters

elements
An html element or more grouped in an array.
options
The same of window .__ drag with the addition of

Option	Type	Description
dragNoTransform	Boolean	If setted on `true`, the animation will be carried along CSS `top` and `left` properties. Otherwise, `transform:translate(X,Y)` will be used. Default to `false`.
dragElementConstraint	Function	A function that if it returns `true` will invalidate the movement of the element. Its parameters are 4 numbers that represent: the new value of the X, the new value of the Y, the difference of the X axis respect to the previous one (<0 right,>0 left), the delta value of the Y axis respect to the previous one (<0 down,>0 top).Default to `function(){return false}`.

Usage

__dragElement(document.getElementsByTagName("main")[0]);

Examples

__dropElement

elements
An html element or more grouped in an array.
options
The same of window .__ drag with the addition of

Option	Type	Description
target	DOM Element	The target element where to drop. Default to `null`, if not setted errors will be raised during the ‘move’ events.
drop	Boolean	If setted to `false`, the element will not be ‘dropped’ ( moved ) to the target element. Default to `true`
styleDrop	String	A class selector to add to the target when the element is upon it.
insertElement	String	Position parameter of the insertAdjacentHTML API. Default to setted to `beforeend`

Basic example, Basic example with multiple elements

__dragList

Parameters

element
An html element. The <li> elements inside it will be moved inside their parent.
options

Option	Type	Description
noDrop	Boolean	If setted to `true`, the elements will not be moved to the new element. Default to `false`
convalidateStart	Function	If returns `false`, the element will not be affected by any action. Default `()=>true`
convalidate	Function	If returns `false`, the animation will not show a copy of the element inside the target element, and the target element will not be considered as the target where to move the element. The function takes three parameters: the element that is moving, whether the position is before or after the target element ( boolean), the target element. Default `()=>true`.
handlerSelector	String	Css selector. If specified, restricts dragging from starting unless the mouse or touch event occurs on the specified element(s). Default to `""`

Basic example, Basic example with multiple elements