sortable wrapper - Free Download jQuery Wrapper For Sortable.js JavaScript Library

Free Download jQuery Wrapper For Sortable.js JavaScript Library

Posted on

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.

sortable wrapper - Free Download jQuery Wrapper For Sortable.js JavaScript Library
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) {