HTML5Sortable – A jQuery based, deprecated Drag’n’Drop sorting library

HTML5Sortable jQuery

HTML5 Sortable is a deprecated jQuery plugin, which has produced 2 forks: Lukas “Voidberg” Oppermanns HTML5 Sortable and RubaXas Sortable variante. Both forks are also developed with the HTML 5 Drag and Drop features, but doesn’t depends on the jQuery library like the father does! This library is also marked as deprecated and not maintained and that for over 4 years.

So it may doesn’t make any sense to work with this free jQuery-based JavaScript, but it may offers itself as a basis for an own great Drag and Drop sorting library. It already supports connected lists, a grid based sorting, disabled items, a drag handle as well as support for IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and Opera 12+. It’s usable for default HTML lists as well as for div-based containers, but it does not support HTML tables at all! The complete set of features comes with less than 1KB (minified and gzipped), so it’s really very light-weight (except that you still need jQuery)!

Download the latest version of HTML5 Sortable as .ZIP or as .TAR package!

Instructions

The HTML5 Sortable doesn’t offer any Style-Guide Stylesheet, and is only available for jQuery in a “packed” (minified) and “unpacked” version. The API is compatible with the jQuery UI package, so you can use jQueryUI as a polyfill in older browsers.

 

Load HTML5 Sortable

The single JavaScript file for the HTML5 Sortable plugin can be located wherever you want, but we recommend to load it immediately after the opened <body> tag. Don’t forget to embed jQuery before you include the jquery.sortable.js file, you should also use a older version of jQuery, if you want to keep the deep browser backward compatibility.

<DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

        <!-- Optional jQueryUI Library -->
        <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/jquery.sortable.js"></script>
    </body>
</html>

 

Init HTML5 Sortable

The file get’s parsed and now just a single line of code turns your lists and containers into D’n’D sortable masterpieces. To make sure, that everything is loaded before we make everything sortable, we pack our single line of code within the “DOMContentLoaded” event aka. jQuery(document).ready() in jQuery.

jQuery(document).ready(function($){
    "use strict";
   
    // Just add the respective method after the jQuery selector
    $('.sortable').sortable();
});

 

Configure HTML5 Sortable

Everything works, but not as we want to. No Problem, HTML5 Sortable comes with a few options.

$('.sortable').sortable({
    items:                  ":not(.disabled)",
    handle:                 null,
    forcePlaceholderSize:   true,
    connectWith:            ".connected"
});

 

Configure: Options

items
Use items option to specifiy which items inside the element should be sortable.
handle
Use handle option to restrict drag start to the specified element.
forcePlaceholderSize
Setting forcePlaceholderSize option to true, forces the placeholder to have a height.
connectWith
Use connectWith option to create connected lists.

Leave a Reply

Top