This time I will share jQuery Plugin and tutorial about jQuery Wrapper For Sortable.js JavaScript Library, hope it will help you in programming stack.
| File Size: | 2.98 KB |
|---|---|
| Views Total: | 64 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This jQuery plugin is a wrapper around the SortableJS JavaScript library that helps you create reorderable drag-and-drop lists in your jQuery project.
How to use it:
1. Load the jquery-sortable.js after jQuery and SortableJS JavaScript libraries.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/cdn/Sortable.min.js"></script> |
3 |
<script src="/path/to/cdn/jquery-sortable.js"></script> |
2. Enable the drag-and-drop functionality on your list. That’s it.
1 |
<ul id="myList"> |
2 |
<li>Item 1</li> |
3 |
<li>Item 2</li> |
4 |
<li>Item 3</li> |
5 |
<li>Item 4</li> |
6 |
<li>Item 5</li> |
7 |
<li>Item 6</li> |
8 |
... |
9 |
</ul> |
1 |
$(function(){ |
2 |
$('#myList').sortable(); |
3 |
}); |
3. All possible plugin options.
001 |
$('#myList').sortable({ |
002 |
003 |
// name: String — group name |
004 |
// pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true. |
005 |
// put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added. |
006 |
// revertClone: boolean — revert cloned element to initial position after moving to a another list. |
007 |
group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] } |
008 |
009 |
// enable sorting |
010 |
sort: true, |
011 |
012 |
// time to wait before the sorting should start |
013 |
delay: 0 |
014 |
015 |
// enable delay on touch |
016 |
delayOnTouchOnly: false, |
017 |
018 |
// how many pixels the point should move before cancelling a delayed drag event |
019 |
touchStartThreshold: 0, |
020 |
021 |
// disables the sortable if set to true. |
022 |
disabled: false, |
023 |
024 |
// which items inside the element should be draggable |
025 |
draggable: '>*' |
026 |
027 |
// save and restore the sort. |
028 |
store: null, |
029 |
030 |
// animation speed |
031 |
animation: 0, |
032 |
033 |
// easing function: "cubic-bezier(1, 0, 0, 1)" |
034 |
easing: null, |
035 |
036 |
// drag handle |
037 |
handle: ".my-handle", |
038 |
039 |
// elements to ignore |
040 |
ignore: 'a, img', |
041 |
042 |
// filter selector |
043 |
filter: ".ignore-elements", |
044 |
045 |
// preverntDefault when filtering |
046 |
preventOnFilter: true, |
047 |
048 |
// drop placeholder |
049 |
ghostClass: "sortable-ghost", |
050 |
051 |
// chosen class |
052 |
chosenClass: "sortable-chosen", |
053 |
054 |
// dragging class |
055 |
dragClass: "sortable-drag", |
056 |
057 |
// default data attribute |
058 |
dataIdAttr: 'data-id', |
059 |
060 |
// enable drop bubble |
061 |
dropBubble: false, |
062 |
063 |
// threshold of the swap zone |
064 |
swapThreshold: 1, |
065 |
066 |
// invert swap |
067 |
invertSwap: false, |
068 |
069 |
// threshold of the inverted swap zone |
070 |
invertedSwapThreshold: 1, |
071 |
072 |
// will be detected automatically if not given |
073 |
direction: 'horizontal', |
074 |
075 |
// ignore the HTML5 DnD behaviour |
076 |
forceFallback: false, |
077 |
078 |
// fallback class |
079 |
fallbackClass: "sortable-fallback", |
080 |
081 |
// appends the cloned DOM Element into the document body |
082 |
fallbackOnBody: false, |
083 |
084 |
// how far the mouse should move before it's considered as a drag. |
085 |
fallbackTolerance: 0, |
086 |
087 |
// fallback offsets |
088 |
fallbackOffset: { |
089 |
x: 0, |
090 |
y: 0 |
091 |
}, |
092 |
093 |
dragoverBubble: false, |
094 |
095 |
// remove the cloned element when it is not showing |
096 |
removeCloneOnHide: true, |
097 |
098 |
// distance mouse must be from empty sortable to insert drag element into it |
099 |
emptyInsertThreshold: 5, // px, |
100 |
101 |
// set data |
102 |
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { |
