Draggable List View With Vanilla JavaScript

Author
In CSS Tutorial Dec 23, 2017
native-js-dnd-list

Here is Draggable List View With Vanilla JavaScript. An ES6 JavaScript library to create a list view where the users are able to re-sort list items via drag and drop.

How to use 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>

The post Draggable List View With Vanilla JavaScript appeared first on CSS Script.

 

Leave a Reply

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