How to Create Sortable Lists with SortableJS

Sortable JS is a Javascript library that enables you to sort lists by dragging and dropping list items. It also supports Javascript frameworks such as Meteor, AngularJS, React, Vue and Ember. In this tutorial, we'll show you how to create sortable lists with Sortable JS.

Getting Started

The first step is to get SortableJS and download it. While there are various ways of installing SortableJS such as via NPM or Yarn, in this tutorial we simply linked to its CDN:

You can see all the ways of getting SortableJS in your project by following this link.

HTML

We get started with building the HTML structure. We have a Bootstrap grid and inside, div container for our sortable list that holds all the sortable items inside. The container that holds all the list items needs to have an id. In this example the id name is sortablelist. We'll select this id name when we create a new SortableJS list later on. 

Note that you don't have to use divs to create sortable lists. You can use ul/li elements as well.

JS

We create a new Sortable list by using the code bock below where sortablelist is the id of out sortable div container. Inside the code block, we have two options: animation and ghostClass. Animation is the speed of the moving items. ghostClass creates the class name for the drop placeholder and stores it.

new Sortable(sortablelist, { animation: 150, ghostClass: 'sortable-ghost' });

While we used only two options above, there are many options for lists. Here are some of them:

    group: To drag list items from one list to another, they need to have the same group value. 
	sort: This is a boolean value to enable/disable sorting inside a list. The default value is true.
	delay: Time in milliseconds to define when the sorting should start. The default value is 0.
	delayOnTouchOnly: Only delay if user is using touch. The default value is false.
	touchStartThreshold: How many pixels the point should move before cancelling a delayed drag event. The default value is 0.
	disabled: Disables the sortable if set to true. The default value is false.
	animation: Animation speed when sorting. 0 is no animation. 
	handle: ".my-handle",  // Drag handle selector within list items
	filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
	draggable: ".item",  // Specifies which items inside the element should be draggable

You can see the full list of options here.

CSS

There we have it. Check out the JSFiddle below to see how it works and feel free to customize the list with the options listed above.