Skip to content
Newer
Older
100644 78 lines (60 sloc) 5.74 KB
34f54cc @kaos Added documentation stubs.
kaos authored
1
b11a84e @kaos doc: rearranged ref docs to include the meta doc.
kaos authored
2 .. include:: meta-sorter.rst
34f54cc @kaos Added documentation stubs.
kaos authored
3
bd4e118 @kaos doc: migrate the remaining scomp docs.
kaos authored
4 A sorter is a container for sortables.
5
6 A sorter contains sortables and handles the events when the order of the sortables is changed. Sortables in a sorter can be reordered by drag & drop.
7
8 Example::
9
10 {% sorter id="sorter" tag="mysorter" %}
11 {% sortable id="sort1" tag=1 %}
12 {% sortable id="sort2" tag=2 %}
13 <ul id="sorter">
14 <li id="sort1">Sortable 1</li>
15 <li id="sort2">Sortable 2</li>
16 </ul>
17
18 This creates a list where the order of the list items can be changed by dragging and dropping them.
19
20 When the order of the sortables is changed, an event is send to the sorter’s page :term:`controller` or :term:`delegate`. The event contains the ordered list of sortable tags.
21
22 The event handler function is called like::
23
24 event({sort, Sortables, Sorter}, Context).
25
26 Where “Sortables” is the list of sortables and “Sorter” is the sorter. Both are ``#dragdrop`` records::
27
28 -record(dragdrop, {tag, delegate, id}).
29
30 Where “tag” is the tag of the sortable or sorter, “delegate” is the module that handles the event and “id” is the HTML id of the sortable or sorter.
31
32 .. note:: that when the tag is a string then the ``#dragdrop`` tag will be an atom.
33
34 The sorter can have the following arguments:
35
36 +---------------+----------------------------------------------------------------------+---------------------------+
37 |Argument |Description |Example |
38 +===============+======================================================================+===========================+
39 |id |The HTML id of the sortable element. |id="mysorter" |
40 +---------------+----------------------------------------------------------------------+---------------------------+
41 |tag |Tag that identifies the sortable to the event handler. Can be any |tag="my_atom_value" |
42 | |value. A string will be converted to an atom. | |
43 +---------------+----------------------------------------------------------------------+---------------------------+
44 |delegate |The delegate of the sorter. The sort event will be send to the |delegate="mymodule" |
45 | |delegate module. Defaults to the resource that handled the page | |
46 | |request. | |
47 +---------------+----------------------------------------------------------------------+---------------------------+
48 |class |A CSS class that will be added to the sorter. The class "sorter" will|class="bunny-sorter" |
49 | |always be added. | |
50 +---------------+----------------------------------------------------------------------+---------------------------+
51 |handle |jQuery selector for the handles of the sortables. When not defined |handle=".sortable-handle" |
52 | |then the whole sortable can be clicked on for dragging. | |
53 +---------------+----------------------------------------------------------------------+---------------------------+
54 |connect_group |Name of the group this sorter connects with. Sortables from this |connect_group="bunnies" |
55 | |sorter can then be dragged to sorters with that group name. This | |
56 | |argument can be repeated to connect with multiple groups. Special | |
57 | |values are "all" and "none" to either connect to all other sorters or | |
58 | |to no other sorter. | |
59 +---------------+----------------------------------------------------------------------+---------------------------+
60 |group |The group of this sorter. Used in connection with the "connect_group" |group="cows" |
61 | |argument. Sortables can be dragged between sorters of the same group. | |
62 +---------------+----------------------------------------------------------------------+---------------------------+
63 |axis |If defined the items can only be dragged horizontally or |axis="y" |
64 | |vertically. Possible values are "x" and "y". | |
65 +---------------+----------------------------------------------------------------------+---------------------------+
66 |containment |Constrains dragging of the sortables to within the bounds of the |containment="parent" |
67 | |specified element. Possible values are "parent", "document", "window",| |
68 | |or a jQuery selector. | |
69 +---------------+----------------------------------------------------------------------+---------------------------+
70 |opacity |Opacity a sortable is set to when being dragged. Defaults to "1.0". |opacity="0.8" |
71 +---------------+----------------------------------------------------------------------+---------------------------+
72 |placeholder |Class that gets applied to the otherwise white space that will show |class="drophere" |
73 | |between sortables as the new place of the sortable. | |
74 +---------------+----------------------------------------------------------------------+---------------------------+
75
76 .. seealso:: the :ref:`scomp-sortable` tag.
77
Something went wrong with that request. Please try again.