https://github.com/rohanrhu/jsortable
jquery plugin for making sortable elements
https://github.com/rohanrhu/jsortable
sortable sortable-elements
Last synced: 8 months ago
JSON representation
jquery plugin for making sortable elements
- Host: GitHub
- URL: https://github.com/rohanrhu/jsortable
- Owner: rohanrhu
- Created: 2015-07-26T15:44:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-07T22:55:17.000Z (over 6 years ago)
- Last Synced: 2025-03-19T03:43:53.713Z (12 months ago)
- Topics: sortable, sortable-elements
- Language: JavaScript
- Homepage: https://oguzhaneroglu.com/projects/jsortable/
- Size: 122 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jsortable
jquery plugin for making sortable elements
## Examples
### Load
```html
```
### Vertical
#### HTML
```html
Element 1
Element 2
Element 3
Element 4
```
#### CSS
```css
.box1 {
width: 500px;
background: #505050;
text-align: left;
color: white;
border-radius: 2px;
border-bottom: 2px solid rgba(0,0,0,0.2);
padding: 10px 10px;
cursor: move;
font-size: 13px;
margin-bottom: 5px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
```
#### Javascript
```javascript
var $example1 = $('.example1');
$example1.jsortable({
mode: $.fn.jsortable.MODE_VERTICAL,
sortable: '.box1',
show_target_placeholder: true,
show_source_placeholder: false
});
$example1.on('jsortable_updated', function (event) {
console.log($example1.jsortable('getElements'));
});
```
### Horizontal
#### HTML
```html
Element 1
Element 2
Element 3
Element 4
```
#### CSS
```css
.box2 {
background: #505050;
text-align: left;
color: white;
border-radius: 2px;
border-bottom: 2px solid rgba(0,0,0,0.2);
padding: 10px 10px;
cursor: move;
font-size: 13px;
margin-bottom: 5px;
margin-right: 5px;
width: 100px;
height: 100px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
float: left;
}
```
#### Javascript
```javascript
$(document).ready(function () {
$('.example2').jsortable({
mode: $.fn.jsortable.MODE_HORIZONTAL,
sortable: '.box2',
show_target_placeholder: true,
show_source_placeholder: false
});
});
```
### Events
There is one event in jsortable.
#### jsortable_updated
Fires on update queue
##### Example
```javascript
$example1.on('jsortable_updated', function (event) {
console.log($example1.jsortable('getElements'));
});
```
### Methods
There is one method in jsortable.
#### getElements()
Get jQuery list sortable elements
##### Return
jQuery array object of elements in order.
##### Example
```javascript
$example1.jsortable('getElements');
```
## License
MIT