# @dinuovos/drag

> __drag is a javascript script suite for tracking mouse/touch events involved with drag/drop/swipe elements. In this package, there are other two methods that actually perform drag and drop actions on DOM elements This is designed to work both desktop

Latest version **1.0.14** (published 2019-04-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dinuovos/drag
pnpm add @dinuovos/drag
yarn add @dinuovos/drag
bun add @dinuovos/drag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2019-04-24 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dinuovos |

## Links

- npm: https://www.npmjs.com/package/@dinuovos/drag
- npm.io page: https://npm.io/package/@dinuovos/drag

## Dependencies (1)

- [@dinuovos/assign-polyfill](https://npm.io/package/@dinuovos/assign-polyfill.md) x.x.x

## Recent versions

- 1.0.14 (latest) — 2019-04-24
- 1.0.13 — 2019-04-14
- 1.0.12 — 2019-04-09
- 1.0.11 — 2019-04-09
- 1.0.10 — 2019-04-09
- 1.0.9 — 2019-04-08
- 1.0.8 — 2019-04-08
- 1.0.7 — 2019-04-08
- 1.0.6 — 2019-04-08
- 1.0.5 — 2019-04-08
- 1.0.4 — 2019-04-08
- 1.0.3 — 2019-04-08
- 1.0.2 — 2019-04-08
- 1.0.1 — 2019-04-08
- 1.0.0 — 2019-04-08

## README

# __DRAG

__drag is a javascript script suite for
 tracking mouse/touch events involved with drag/drop/swipe elements.
In this package, there are other two methods that actually perform drag and drop
actions on DOM elements
This is designed to work both desktop and mobile

## Usage
__drag is the main method.
It simply notify when mouse or touch events are fired ( eventListener are initialized on page load ).
Because it does not make any changes in the user interface, it is
an ideal basis for creating more complex actions such as drag-and-drop,swipe,etc..
```js
var defaultsOptions = {
    onlyHandler : true, // if true, element children will not trigger the drag event
    grabCursors : true, // if true, css classes will be added to document.body in order to change mouse cursor
    drop : true, // only for __dropElement module, set to true will drop the element
    target : null, // only for __dropElement module, set to the DOM target element where to drop
    grabClass : '__drag-cursor-grab', // default css class when grab element
    grabbingClass : '__drag-cursor-grabbing', // default css class when grabbing element
    noDrop : false, // only for __dropElement module ,
    // if set to true will change grabbing with a no-drop mouse cursor when over an element different from the target
    noDropClass : '__drag-cursor-no-drop', // class for no-drop
    styleDrop : '__drag__drop-overlay', // only for __dropElement module ,
     // style to be added to the drop target element when hover
    insertElement : 'beforeend' // only for __dropElement module ,
    // position where to insert html, according to element.insertAdjacentHTML
    // see at https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
};
var handlerEl = document.getElementById("element-to-drag");
var drag = __drag(HandlerEl,defaultsOptions);
drag.on("down", function(ev){
  // action on mousedown/touchstart
  // ev is based upon the real event object:
  /*
  e = real event object
  ev = {
        x : e.pageX,
        y : e.pageY,
        target : e.target,
        ev : e
  };
  while in mobile is slightly different:
  ev = {
      x : e.changedTouches[0].pageX,
      y : e.changedTouches[0].pageY,
      ev : e,
      target : document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY),
  };
  */
})
drag.on("move", function(ev){
  // action on mousemove/touchmove
})
drag.on("up", function(ev){
  // action on mouseup/touchend
})
drag.destroy() // remove listeners
```
## __dragElement module

__dragElement drag a DOM element

```js
    var d = __dragElement(document.getElementsByTagName("main")[0]);
    d.destroy(); // remove drag
```
## __dropElement module

__dropElement drag and drop a DOM element in a predefined target

```js
    var d = __dropElement(document.getElementsByTagName("main")[0],{
        target : document.getElementById("target")
    });
    d.destroy(); // remove drag and drop listeners
```

---
_Source: https://npm.io/package/@dinuovos/drag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._