🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

bootstrap-html5sortable

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bootstrap-html5sortable

Bootstrap HTML5 Sortable lightweight jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

1.0.0
latest
npm
Version published
Weekly downloads
441
-4.55%
Maintainers
1
Weekly downloads
 
Created
Source

Bootstrap HTML5 Sortable jQuery Plugin

Demos & Documentation

Features

  • Less than 1KB (minified and gzipped).
  • Built using native HTML5 drag and drop API.
  • Supports both list and grid style layouts.
  • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.

Usage

Use sortable method to create a sortable list:

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

Use .sortable-dragging and .sortable-placeholder CSS selectors to change the styles of a dragging item and its placeholder respectively.

Use placeholderClass option to create sortable lists with additional class for placeholder:

$('.sortable').sortable({
    placeholderClass: 'customPlaceholderClass'
});

Use sortupdate event if you want to do something when the order changes (e.g. storing the new order):

$('.sortable').sortable().bind('sortupdate', function(e, ui) {
    //ui.item contains the current dragged element.
    //Triggered when the user stopped sorting and the DOM position has changed.
});

Use items option to specifiy which items inside the element should be sortable:

$('.sortable').sortable({
    items: ':not(.disabled)'
});

Use handle option to restrict drag start to the specified element:

$('.sortable').sortable({
    handle: 'h2'
});

Setting forcePlaceholderSize option to true, forces the placeholder to have a height:

$('.sortable').sortable({
    forcePlaceholderSize: true 
});

Use connectWith option to create connected lists:

$('#sortable1, #sortable2').sortable({
    connectWith: '.connected'
});

Use sortconnect event if you want to do something when an item is moved between connected lists:

$('.sortable').sortable().bind('sortconnect', function(e, ui) {
    //ui.item contains the current dragged element.
    //Triggered when the user stopped sorting and the item is moved between connected lists.
});

To remove the sortable functionality completely:

$('.sortable').sortable('destroy');

To disable the sortable temporarily:

$('.sortable').sortable('disable');

To enable a disabled sortable:

$('.sortable').sortable('enable');

License

Released under the MIT license.

Keywords

bootstrap

FAQs

Package last updated on 25 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts