mv-sorter

A custom element that makes the content sortable

Usage no npm install needed!

<script type="module">
  import mvSorter from 'https://cdn.skypack.dev/mv-sorter';
</script>

README

Published on NPM

<mv-sorter>

Drag and drop for lists as a web component.

Demo

See Demo.

Features

  • Natural movement of items using kinetic momentum

  • Performant (using requestAnimationFrame and css translate)

  • Clean and powerful api

  • Vertical lists

  • Horizontal lists

  • Movement between lists

  • Supports both mouse and touch interfaces

  • Unopiniated 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

  • 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>
  <head>
    <script type="module">
      import 'mv-sorter/sorter.js';
    </script>
  </head>
  <body>
    <mv-sorter><div>A</div><div>B</div></mv-sorter>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import 'mv-sorter/mv-sorter.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <mv-sorter><div>A</div><div>B</div></mv-sorter>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Missing features

  • Keyboard and accessability support

  • Scroll viewport when items are dragged to edge

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/aigan/mv-sorter
cd mv-sorter
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Or you can compile a static version to dist for use with a normal web server: grunt demo