Skip to content

Commit 91c7b77

Browse files
committed
Update and decouple drag.sort, add usePlaceholderClone option, recompile assets
1 parent 1d4a5b5 commit 91c7b77

File tree

3 files changed

+894
-686
lines changed

3 files changed

+894
-686
lines changed

assets/ui/docs/drag-sort.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,85 @@
22

33
Allows the dragging of things.
44

5+
### JavaScript API:
6+
7+
The `sortable()` method must be invoked on valid containers, meaning they must match the containerSelector option.
8+
9+
`.sortable('enable')`
10+
Enable all instantiated sortables in the set of matched elements
11+
12+
`.sortable('disable')`
13+
Disable all instantiated sortables in the set of matched elements
14+
15+
`.sortable('refresh')`
16+
Reset all cached element dimensions
17+
18+
`.sortable('destroy')`
19+
Remove the sortable plugin from the set of matched elements
20+
21+
`.sortable('serialize')`
22+
Serialize all selected containers. Returns a jQuery object . Use .get() to retrieve the array, if needed.
23+
24+
### Supported options:
25+
26+
- `useAnimation`: Use animation when an item is removed or inserted into the tree.
27+
28+
- `usePlaceholderClone`: Placeholder should be a clone of the item being dragged.
29+
30+
- `afterMove`: This is executed after the placeholder has been moved. $closestItemOrContainer contains the closest item, the placeholder has been put at or the closest empty Container, the placeholder has been appended to.
31+
32+
- `containerPath`: The exact css path between the container and its items, e.g. "> tbody"
33+
34+
- `containerSelector`: The css selector of the containers
35+
36+
- `distance`: Distance the mouse has to travel to start dragging
37+
38+
- `delay`: Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
39+
40+
- `handle`: The css selector of the drag handle
41+
42+
- `itemPath`: The exact css path between the item and its subcontainers. It should only match the immediate items of a container. No item of a subcontainer should be matched. E.g. for ol>div>li the itemPath is "> div"
43+
44+
- `itemSelector`: The css selector of the items
45+
46+
- `bodyClass`: The class given to "body" while an item is being dragged
47+
48+
- `draggedClass`: The class giving to an item while being dragged
49+
50+
- `isValidTarget`: Check if the dragged item may be inside the container. Use with care, since the search for a valid container entails a depth first search and may be quite expensive.
51+
52+
- `onCancel`: Executed before onDrop if placeholder is detached. This happens if pullPlaceholder is set to false and the drop occurs outside a container.
53+
54+
- `onDrag`: Executed at the beginning of a mouse move event. The Placeholder has not been moved yet.
55+
56+
- `onDragStart`: Called after the drag has been started, that is the mouse button is being held down and the mouse is moving. The container is the closest initialized container. Therefore it might not be the container, that actually contains the item.
57+
58+
- `onDrop`: Called when the mouse button is being released
59+
60+
- `onMousedown`: Called on mousedown. If falsy value is returned, the dragging will not start. Ignore if element clicked is input, select or textarea
61+
62+
- `placeholderClass`: The class of the placeholder (must match placeholder option markup)
63+
64+
- `placeholder`: Template for the placeholder. Can be any valid jQuery input e.g. a string, a DOM element. The placeholder must have the class "placeholder"
65+
66+
- `pullPlaceholder`: If true, the position of the placeholder is calculated on every mousemove. If false, it is only calculated when the mouse is above a container.
67+
68+
- `serialize`: Specifies serialization of the container group. The pair $parent/$children is either container/items or item/subcontainers.
69+
70+
- `tolerance`: Set tolerance while dragging. Positive values decrease sensitivity, negative values increase it.
71+
72+
### Supported options (container specific):
73+
74+
- `drag`: If true, items can be dragged from this container
75+
76+
- `drop`: If true, items can be droped onto this container
77+
78+
- `exclude`: Exclude items from being draggable, if the selector matches the item
79+
80+
- `nested`: If true, search for nested containers within an item.If you nest containers, either the original selector with which you call the plugin must only match the top containers, or you need to specify a group (see the bootstrap nav example)
81+
82+
- `vertical`: If true, the items are assumed to be arranged vertically
83+
584
# Example
685

786
<ol id="sortExample">

0 commit comments

Comments
 (0)