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