jQuery UI Sortable

Implementing sorting through drag & drop events using jQuery. We’ll use Sortable from the jQuery User Interface Library. For detailed introduction, please refer to the link below.

Link: Go to jQuery-UI Guide Page

First, to use this library, you need related script files. You can link them or download them directly. (If downloading directly, it’s convenient to get them through bower after installing node.js)

After checking links or downloading files, declare the script file paths in the <head> section of the page where you’ll implement Sortable as follows.

<!-- Set file path directly -->
<script src="path/jquery.min.js" type="text/javascript"/>
<script src="path/jquery-ui.js" type="text/javascript"/>

<!--
    Set link path directly
    jQuery CDN reference https://code.jquery.com/
-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"/>

Implementing Sortable

Using jQuery UI Sortable. Usage is as follows:

$('.selector').sortable();

$.(.selector').sortable({
	/* Can specify what to apply or disable sorting */
	items: $('.selector')

});

You can check it in jsfiddle where I tested for this post.

Go to Example Page (jsfiddle)

The example I wrote is simple but provides more features. You can also control drag direction horizontally or vertically.

$('.selector').sortable({
	axis: 'x' /* or write y. */
})

/* Can be applied at initialization, but can also be set afterward. */
$('.selector').sortable('option', 'axis', 'x');

/* Can also retrieve what was set. */
var axis = $('.selector').sortable('option', 'axis');

Of course, you can also get information about the position where dragging started and where it was dropped.

$('.selector').sortable({
	item: $('.selector'),
	start: function(event, ui) {
	    console.log('start point : ' + ui.item.position().top);
    },
    end: function(event, ui) {
        console.log('end point : ' + ui.item.position().top);
    }
})

Since the object being dragged or dropped is contained in the arguments of methods provided by Sortable, you can also access through index if configured as an array.