Sorting Boxes: Drag N Drop (): Magic JavaScript

• 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>
• The best way to get up and running is to use the example below as a starting point.

<div data-mjf="drag_n_drop_sort" data-mjf_dnds_update_field="dnd_sort_ex_1_field" class="dnd_sort_cont" id="dnd_sort_ex_1"> <div class="dnd_sort_box" data-mjf_dnds_value="1" id="dnd_sort_ex_1_1"> <p>Sort Box One</p> </div> <div class="dnd_sort_box" data-mjf_dnds_value="2" id="dnd_sort_ex_1_2"> <p>Sort Box Two</p> </div> <div class="dnd_sort_box" data-mjf_dnds_value="3" id="dnd_sort_ex_1_3"> <p>Sort Box Three</p> </div> <div class="clear_both"></div> <p><input type="text" name="dnd_sort_ex_1_field" value="" id="dnd_sort_ex_1_field"></p> </div> <script type="text/javascript">$m.trick.drag_n_drop.sort = true;</script>