PHPackages                             raoul2000/yii2-html5sortable-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. raoul2000/yii2-html5sortable-widget

ActiveYii2-extension

raoul2000/yii2-html5sortable-widget
===================================

Wrapper around the HTML5sortable JQuery plugin

1.0.0(11y ago)1351BSD-3-ClauseJavaScript

Since Jun 28Pushed 11y ago1 watchersCompare

[ Source](https://github.com/raoul2000/yii2-html5sortable-widget)[ Packagist](https://packagist.org/packages/raoul2000/yii2-html5sortable-widget)[ RSS](/packages/raoul2000-yii2-html5sortable-widget/feed)WikiDiscussions master Synced yesterday

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

yii2-html5sortable-widget
=========================

[](#yii2-html5sortable-widget)

Wrapper around "HTML5 Sortable", a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Check out the [HTML5 Sortable](http://farhadi.ir/projects/html5sortable/) for demo of the Plugin.

> Please note that this extension does not provide any aditionnal feature than the one available in the wrapped plugin. It has no other dependency than the [Yii2 Framework](http://www.yiiframework.com/)

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
php composer.phar require --prefer-dist raoul2000/yii2-html5sortable-widget "*"

```

or add

```
"raoul2000/yii2-html5sortable-widget": "*"

```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

This is an example no how to use this extension once it is installed. First, create an HTML [bootstrap list group](http://getbootstrap.com/components/#list-group) :

```

		   Cras justo odio
		   can't be dragged because of disabled class
		   Morbi leo risus
		  can't be dragged because the handle is missing !
		   Vestibulum at eros

```

Then let's add some styling so our list items render nicely when drag and dropped :

```
	li.list-group-item {
		height:42px;
	}
	li.sortable-placeholder {
		border: 1px dashed #CCC;
		background: #eeeeee;
		height:42px;
		list-style: none;
	}
```

Finally, make is **HTML 5 Sortable** by inserting following code :

```