# moveme

> Move HTML DOM elements on the fly!

Latest version **0.4.0** (published 2017-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install moveme
pnpm add moveme
yarn add moveme
bun add moveme
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2017-07-16 |
| First published | 2017-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hugo Matalonga |
| Maintainers | hmatalonga |
| Keywords | dom, sort, move, element, elements, utility |

## Links

- npm: https://www.npmjs.com/package/moveme
- Repository: https://github.com/hmatalonga/moveme
- Homepage: https://github.com/hmatalonga/moveme#readme
- Issues: https://github.com/hmatalonga/moveme/issues
- npm.io page: https://npm.io/package/moveme

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2017-07-16
- 0.3.2 — 2017-07-13
- 0.3.1 — 2017-07-13
- 0.3.0 — 2017-07-13
- 0.2.1 — 2017-07-13
- 0.2.0 — 2017-07-13

## README

# moveMe [![Build Status](https://travis-ci.org/sindresorhus/path-type.svg?branch=master)](https://travis-ci.org/hmatalonga/moveme) [![npm version](https://badge.fury.io/js/moveme.svg)](https://badge.fury.io/js/moveme)

> Move HTML DOM elements on the fly!

## Install

```
$ npm install --save moveme
```

## Usage

```js
const moveMe = require('moveme');

const someElement = document.querySelector('#someId');

// Moves to the next position relative to the parent
moveMe.toNext(someElement);

// Moves to the previous position relative to the parent
moveMe.toPrevious(someElement);

// Moves to the last position of the parent node
moveMe.toLast(someElement);

// Moves to the first position of the parent node
moveMe.toFirst(someElement);

// Moves to the third position of the parent node
moveMe.toPosition(someElement, 3);

// You can also set additional options
moveMe.toNext(someElement, {
  duration: '.6s',
  timingFunction: 'linear',
  delay: '1s'
});
```

## API

### moveMe.toNext(element, [options])

Moves the given HTML DOM element to the next position relative to its current position.

### moveMe.toPrevious(element, [options])

Moves the given HTML DOM element to the previous position relative to its current position.

### moveMe.toFirst(element, [options])

Moves the given HTML DOM element to the first position of the parent node.

### moveMe.toLast(element, [options])

Moves the given HTML DOM element to the last position of the parent node.

### moveMe.toPosition(element, position, [options])

Moves the given HTML DOM element to the given position of the parent node.

---
**Note:** When a movement is not possible, either a position is not value or the element is already at the requested position, all methods will stop with a `return` statement.

### Arguments

#### element

Type: `object`

HTML DOM element to move.

#### position

Type: `number`

Position where to move the element.

#### options

Type: `object`

##### animation

Type: `string`<br>
Values: `fadeInOut` `none`<br>
Default: `fadeInOut`

Animation name for the element's effect movement. It makes use of CSS transitions.

##### duration

Type: `string`<br>
Default: `.4s`

Duration of the transition effect. See [transition duration docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration).

##### timingFunction

Type: `string`<br>
Default: `ease-in-out`

Timing function name of the transition effect. See [transition timing function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).

##### delay

Type: `string`<br>
Default: `0s`

Delay of the transition effect. See [transition delay docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay).




## License

MIT © [Hugo Matalonga](http://hmatalonga.com)

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