https://github.com/aigan/mv-sorter

A custom element that makes the content sortable
https://github.com/aigan/mv-sorter

animation component dnd drag drag-and-drop drag-drop draggable dragging droppable frontend javascript polymer-3 reordering sort sortable sorting ui web-component web-components

Last synced: 8 days ago
JSON representation

A custom element that makes the content sortable

• Host: GitHub
• URL: https://github.com/aigan/mv-sorter
• Owner: aigan
• Created: 2019-03-14T14:23:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-12T19:41:53.000Z (about 1 year ago)
• Last Synced: 2024-10-28T13:10:29.387Z (16 days ago)
• Topics: animation, component, dnd, drag, drag-and-drop, drag-drop, draggable, dragging, droppable, frontend, javascript, polymer-3, reordering, sort, sortable, sorting, ui, web-component, web-components
• Language: JavaScript
• Size: 167 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Published on NPM](https://img.shields.io/npm/v/mv-sorter.svg)](https://www.npmjs.com/package/mv-sorter)

# <mv-sorter>

Drag and drop for lists as a web component.

## Demo

See [Demo](https://blog.jonas.liljegren.org/mv-sorter/).

## Features

* Natural movement of items using kinetic momentum

* Performant (using requestAnimationFrame and css translate)

* No dependencies

* Clean and powerful api

* Vertical lists

* Horizontal lists

* Movement between lists

* Supports both mouse and touch interfaces

* Unopinionated styling

* No creation of additional wrapper dom nodes

* Accepts any html elements as draggable

* Allows text selection around and inside items

* Handles elements of different sizes

* Supports drop of element anywhere on page, finding the closest availible drop area

* Handles changing visibility of drop zones

* Optional drag handles

* (almost) supports multiple and nested sortable containers

* Configurable drop zones per container.

* Dispatches events and uses css classes for changing states

* Respects the disabled attribute

* Handles changes in element and page layout during dragging and animations

## Usage

### Installation

```

npm install --save mv-sorter

```

### In an html file

```html

A
B

```


Supported attributes are:

* row: elements are displayes horizontal (default)

* column: elements are displayed vertical

* lock: Only move in selected axis

* group: Allow movement to other containers in the same group

* autosave: move element in DOM after drop

* disabled: make container inactive

Events you can listen to on the `mv-sorter` container:

* drop: details `{element, item}`

* dropoutside: details `{element, item}`

Methods availible on the `mv-sorter` container:

* reset(): move all items back to their original DOM positions

* commit(): update DOM placing items in their new place

* elements(): lists elements in the container, similar to what you would get from the DOM after a commit()

* elements_removed(): list elements moved to another contianer

* elements_added(): lists elements moved here from another container

The property `is_altered` tells you if anything has changed, like sort order or anything added or removed.

You can also add a `mv-draghandle` in an element for using that for dragging, instead of the whole element.

## Missing features

* Keyboard and accessability support

* Scroll viewport when items are dragged to edge