Press "Enter" to skip to content

Draggable List View Written in JavaScript/TypeScript

native-js-dnd-list is an ES6 JavaScript library for creating a list view where users can resort list items by dragging and dropping written in TypeScript without dependencies. Supports mobile devices.

javascript draggable list, sortable js, javascript drag and drop list, draggable js examples, drag and drop sortable list, html5 drag and drop list example, drag and drop cards javascript

How to make use of it:

Install the library.

# Yarn
$ yarn add native-js-dnd-list

# NPM
$ npm install native-js-dnd-list --save

The HTML for the list view.

<div id="list" class="list">
  <div class="divider"></div>
  <div class="item">
    Hello!
    <div class="item-id">(id: 0)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    This is drag'n'drop list written on native javascript
    <div class="item-id">(id: 1)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    Just drag and drop list items to see how it's working!
    <div class="item-id">(id: 2)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    If you're interesting in source code, check my
    <a href="https://github.com/loonywizard/native-js-dnd-list" target="_blank">GitHub repo</a>
    <div class="item-id">(id: 3)</div>
  </div>
  <div class="divider"></div>
  <div class="item">
    Found any bugs or have a suggestion? Please, add an
    <a href="https://github.com/loonywizard/native-js-dnd-list/issues" target="_blank">Issue</a>!
    <div class="item-id">(id: 4)</div>
  </div>
  <div class="divider"></div>
</div>

draggable list view, native-js-dnd-list Plugin/Github, javascript drag and drop reorder div


See Demo And Download

Official Website(loonywizard): Click Here

This superior jQuery/javascript plugin is developed by loonywizard. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *