area-sortable.js

Simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile).

version 1.2.2 (16 kB minified)

Vertical Sortable (symmetric/asymmetric)

Horizontal Sortable (symmetric/asymmetric)

Unrestricted Sortable (symmetric)

Unrestricted Sortable (asymmetric)

Horizontal Sortable with autoscroll (symmetric/asymmetric)

Unrestricted Sortable with autoscroll (symmetric)

Live Demo

• Live Demo

Todo

• handle asymmetric items [DONE]
• handle automatic scrolling when sortable area is partially hidden (autoscroll option) [DONE]
• enable drag and drop item between different sortable areas (TODO)

see also:

• ModelView a simple, fast, powerful and flexible MVVM framework for JavaScript
• Contemplate a fast and versatile isomorphic template engine for PHP, JavaScript, Python
• HtmlWidget html widgets, made as simple as possible, both client and server, both desktop and mobile, can be used as (template) plugins and/or standalone for PHP, JavaScript, Python (can be used as plugins for Contemplate)
• Paginator simple and flexible pagination controls generator for PHP, JavaScript, Python
• ColorPicker a fully-featured and versatile color picker widget
• Pikadaytime a refreshing JavaScript Datetimepicker that is lightweight, with no dependencies
• Timer count down/count up JavaScript widget
• InfoPopup a simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)
• Popr2 a small and simple popup menu library
• area-select.js a simple JavaScript class to select rectangular regions in DOM elements (image, canvas, video, etc..)
• area-sortable.js simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile)
• css-color simple class for manipulating color values and color formats for css, svg, canvas/image
• jquery-plugins a collection of custom jQuery plugins
• jquery-ui-widgets a collection of custom, simple, useful jQueryUI Widgets
• touchTouch a variation of touchTouch jQuery Optimized Mobile Gallery in pure vanilla JavaScript
• Imagik fully-featured, fully-customisable and extendable Responsive CSS3 Slideshow
• Carousel3 HTML5 Photo Carousel using Three.js
• Rubik3 intuitive 3D Rubik Cube with Three.js
• MOD3 JavaScript port of AS3DMod ActionScript 3D Modifier Library
• Geometrize Computational Geometry and Rendering Library for JavaScript
• RT unified client-side real-time communication for JavaScript using XHR polling / BOSH / WebSockets / WebRTC
• AjaxListener.js: Listen to any AJAX event on page with JavaScript, even by other scripts
• asynchronous.js simple manager for asynchronous, linear, parallel, sequential and interleaved tasks for JavaScript
• classy.js Object-Oriented mini-framework for JavaScript