Quick Jump ↵
Add <link href="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..css" rel="stylesheet"> <script type="text/javascript" src="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..js" charset="UTF-8"></script> below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
<link href="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..css" rel="stylesheet">
<script type="text/javascript" src="/PATH/TO/magic/tricks/drag_n_drop/drag_n_drop..js" charset="UTF-8"></script>
<script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
Add <script type="text/javascript">$m.trick.drag_n_drop.sort = true;</script> inside your <body> tag.
<script type="text/javascript">$m.trick.drag_n_drop.sort = true;</script>
<body>
Use the examples below to build your own!
1. Simple sorting
Sort Box 1.1
Sort Box 1.2
Sort Box 1.3
Sort Box 1.4
<div data-mjf="drag_n_drop_sort" class="dnd_sort_cont" id="dnd_sort_ex_1"> <div class="dnd_sort_box" id="dnd_sort_ex_1_1"> <p>Sort Box 1.1</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_1_2"> <p>Sort Box 1.2</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_1_3"> <p>Sort Box 1.3</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_1_4"> <p>Sort Box 1.4</p> </div> <div class="clear_both"></div> </div>
2. Sorting and recording values
Sort Box 2.1
Sort Box 2.2
Sort Box 2.3
Sort Box 2.4
<div data-mjf="drag_n_drop_sort" data-mjf_drag_n_drop_update_field="dnd_sort_ex_2_field" class="dnd_sort_cont" id="dnd_sort_ex_2"> <div class="dnd_sort_box" data-mjf_drag_n_drop_value="2.1" id="dnd_sort_ex_2_1"> <p>Sort Box 2.1</p> </div> <div class="dnd_sort_box" data-mjf_drag_n_drop_value="2.1" id="dnd_sort_ex_2_2"> <p>Sort Box 2.2</p> </div> <div class="dnd_sort_box" data-mjf_drag_n_drop_value="2.1" id="dnd_sort_ex_2_3"> <p>Sort Box 2.3</p> </div> <div class="dnd_sort_box" data-mjf_drag_n_drop_value="2.1" id="dnd_sort_ex_2_4"> <p>Sort Box 2.4</p> </div> <div class="clear_both"></div> <p><input type="text" name="" value="" id="dnd_sort_ex_2_field"></p> </div>
The data-mjf_drag_n_drop_update_field attribute should be set to an existing form field's ID.
data-mjf_drag_n_drop_update_field
After sorting, the field's value will be set to a sorted, pipe-delimited string.
The data-mjf_drag_n_drop_value attributes should be set to whatever values you'd like to record.
data-mjf_drag_n_drop_value
3. Sorting and deleting
Sort Box 3.1
Sort Box 3.2
Sort Box 3.3
Sort Box 3.4
<div data-mjf="drag_n_drop_sort" data-mjf_drag_n_drop_remove="true" class="dnd_sort_cont" id="dnd_sort_ex_3"> <div class="dnd_sort_box" id="dnd_sort_ex_3_1"> <p>Sort Box 3.1</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_3_2"> <p>Sort Box 3.2</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_3_3"> <p>Sort Box 3.3</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_3_4"> <p>Sort Box 3.4</p> </div> <div class="clear_both"></div> </div>
When the data-mjf_drag_n_drop_remove attribute is set to "true" a will appear on each sortable item.
data-mjf_drag_n_drop_remove
"true"
4. Dragging to different containers
Sort Box 4.1
Sort Box 4.2
Sort Box 4.3
Sort Box 4.4
Sort Box 5.1
Sort Box 5.2
Sort Box 5.3
Sort Box 5.4
<div data-mjf="drag_n_drop_sort" data-mjf_drag_n_drop_parent_set="any" class="dnd_sort_cont" id="dnd_sort_ex_4"> <div class="dnd_sort_box" id="dnd_sort_ex_4_1"> <p>Sort Box 4.1</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_4_2"> <p>Sort Box 4.2</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_4_3"> <p>Sort Box 4.3</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_4_4"> <p>Sort Box 4.4</p> </div> <div class="clear_both"></div> </div> <div data-mjf="drag_n_drop_sort" data-mjf_drag_n_drop_parent_set="any" class="dnd_sort_cont" id="dnd_sort_ex_5"> <div class="dnd_sort_box" id="dnd_sort_ex_5_1"> <p>Sort Box 5.1</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_5_2"> <p>Sort Box 5.2</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_5_3"> <p>Sort Box 5.3</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_5_4"> <p>Sort Box 5.4</p> </div> <div class="clear_both"></div> </div>
By default, sortable elements cannot be dragged from one container to another.
This can be disabled by adding data-mjf_dnds_set_parent="any" to the primary container that contains the data-mjf="drag_n_drop_sort".
data-mjf_dnds_set_parent="any"
data-mjf="drag_n_drop_sort"
5. Sorting and then fire a JavaScript callback
Sort Box 6.1
Sort Box 6.2
Sort Box 6.3
Sort Box 6.4
<div data-mjf="drag_n_drop_sort" data-mjf_drag_n_drop_callback="example_6_callback" class="dnd_sort_cont" id="dnd_sort_ex_6"> <div class="dnd_sort_box" id="dnd_sort_ex_6_1"> <p>Sort Box 6.1</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_6_2"> <p>Sort Box 6.2</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_6_3"> <p>Sort Box 6.3</p> </div> <div class="dnd_sort_box" id="dnd_sort_ex_6_4"> <p>Sort Box 6.4</p> </div> <div class="clear_both"></div> </div>
The data-mjf_drag_n_drop_callback attribute should be set to an existing JavaScript function's name.
data-mjf_drag_n_drop_callback
It will be passed the newly dropped element as an object.
The various data-mjf_drag_and_drop_* attributes can be mixed and matched as needed.
data-mjf_drag_and_drop_*
By default, any elements inside a class="dnd_sort_box" will trigger the drag and drop operation. If you wish certain elements NOT to do this, add data-mjf_drag_n_drop_ignore="true" to that element.
class="dnd_sort_box"
data-mjf_drag_n_drop_ignore="true"
data-mjf_drag_n_drop_value=""
« Back to Drag N Drop
« Back to the main documentation
Sorting: Drag N Drop (): Magic JavaScript