Get new jQuery plugins just once a week

×

vSort

FavoriteLoadingAdd to favorites

June 21, 2015

vSort | jQuery plugin to make lists sortable with a handle

vSort is a simple to use jQuery plugin to make any list sortable with a handle.

Created by Lastdates

Download

Example

vSort jQuery plugin

sortable lists

vSort v1.2.2

vSort is a simple jQuery plugin for making lists sortable with a handle * less than 1.6kB including css * Tested in IE8, FireFox, Chrome, Touch enabled for mobiles * Restrictive sort, aka selected elements not crossing each other (v1.2) * Touch-enabled for mobile (v 1.1) * Nested sorting within lists, callback function on successful sort (v 1.0) * Live Demo

Screenshot

To include vSort plugin

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.vSort.min.js"></script>

To run a javascript code after sorting is done

data-callback="alert('list order modified')"

Sample code

<style>
    #demo {background:#E2E2E2;border:2px solid red;}
    .sortitem{background:#fff;border:2px solid #ccc;padding-left:20px;}
    .sortitem .sorthandle{position:absolute;top:5px;bottom:5px;left:3px;width:8px;display:none;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAB3RJTUUH3wIDBycZ/Cj09AAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAAWSURBVHjaY2DABhoaGupBGMRmYiAEAKo2BAFbROu9AAAAAElFTkSuQmCC');}
    .sortitem:hover .sorthandle{display:block;}
</style>
<!-- sort container -->
<div id="demo" data-callback="alert('list order modified')"> <!-- callback script to run on successful sort -->
    <div class="sortitem"> <!-- sort item -->
        <span class="sorthandle"> </span> <!-- sort handle -->
        111111<br>111111
    </div>
    <div class="sortitem" data-restrict="alpha"> <!-- restrict sort, not-to-cross another alpha item -->
        <span class="sorthandle"> </span>
        I am alpha<br>I don't cross beta<br>Try
    </div>
    <div class="sortitem">
        <span class="sorthandle"> </span>
        333333<br>333333<br>333333<br>333333
    </div>
    <div class="sortitem" data-restrict="beta">
        <span class="sorthandle"> </span>
        Yep - I don't cross Yo
    </div>
    <div class="sortitem">
        <span class="sorthandle"> </span>
        Yes
    </div>
    <div class="sortitem" data-restrict="alpha">
        <span class="sorthandle"> </span>
        I am beta<br>I also don't cross alhpa<br>Its obvious ;)
    </div>
    <div class="sortitem" data-restrict="beta">
        <span class="sorthandle"> </span>
        Yo - I don't cross Yep
    </div>
</div>

To update vSort-lists after new items are added to sort container

$().vSort();
vSort

Related posts:

Twinkle
Multifilter
google bubbles

To install using Bower
bower install vSort

vSort jQuery plugin

http://jquer.in/wp-content/uploads/2015/02/vSort.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever