1 addEvent(window, 'load', reorder_init);

     2 

     3 var lis;

     4 var top = 0;

     5 var left = 0;

     6 var height = 30;

     7 

     8 function reorder_init() {

     9     lis = document.getElementsBySelector('ul#orderthese li');

    10     var input = document.getElementsBySelector('input[name=order_]')[0];

    11     setOrder(input.value.split(','));

    12     input.disabled = true;

    13     draw();

    14     // Now initialise the dragging behaviour

    15     var limit = (lis.length - 1) * height;

    16     for (var i = 0; i < lis.length; i++) {

    17         var li = lis[i];

    18         var img = document.getElementById('handle'+li.id);

    19         li.style.zIndex = 1;

    20         Drag.init(img, li, left + 10, left + 10, top + 10, top + 10 + limit);

    21         li.onDragStart = startDrag;

    22         li.onDragEnd = endDrag;

    23         img.style.cursor = 'move';

    24     }

    25 }

    26 

    27 function submitOrderForm() {

    28     var inputOrder = document.getElementsBySelector('input[name=order_]')[0];

    29     inputOrder.value = getOrder();

    30     inputOrder.disabled=false;

    31 }

    32 

    33 function startDrag() {

    34     this.style.zIndex = '10';

    35     this.className = 'dragging';

    36 }

    37 

    38 function endDrag(x, y) {

    39     this.style.zIndex = '1';

    40     this.className = '';

    41     // Work out how far along it has been dropped, using x co-ordinate

    42     var oldIndex = this.index;

    43     var newIndex = Math.round((y - 10 - top) / height);

    44     // 'Snap' to the correct position

    45     this.style.top = (10 + top + newIndex * height) + 'px';

    46     this.index = newIndex;

    47     moveItem(oldIndex, newIndex);

    48 }

    49 

    50 function moveItem(oldIndex, newIndex) {

    51     // Swaps two items, adjusts the index and left co-ord for all others

    52     if (oldIndex == newIndex) {

    53         return; // Nothing to swap;

    54     }

    55     var direction, lo, hi;

    56     if (newIndex > oldIndex) {

    57         lo = oldIndex;

    58         hi = newIndex;

    59         direction = -1;

    60     } else {

    61         direction = 1;

    62         hi = oldIndex;

    63         lo = newIndex;

    64     }

    65     var lis2 = new Array(); // We will build the new order in this array

    66     for (var i = 0; i < lis.length; i++) {

    67         if (i < lo || i > hi) {

    68             // Position of items not between the indexes is unaffected

    69             lis2[i] = lis[i];

    70             continue;

    71         } else if (i == newIndex) {

    72             lis2[i] = lis[oldIndex];

    73             continue;

    74         } else {

    75             // Item is between the two indexes - move it along 1

    76             lis2[i] = lis[i - direction];

    77         }

    78     }

    79     // Re-index everything

    80     reIndex(lis2);

    81     lis = lis2;

    82     draw();

    83 //    document.getElementById('hiddenOrder').value = getOrder();

    84     document.getElementsBySelector('input[name=order_]')[0].value = getOrder();

    85 }

    86 

    87 function reIndex(lis) {

    88     for (var i = 0; i < lis.length; i++) {

    89         lis[i].index = i;

    90     }

    91 }

    92 

    93 function draw() {

    94     for (var i = 0; i < lis.length; i++) {

    95         var li = lis[i];

    96         li.index = i;

    97         li.style.position = 'absolute';

    98         li.style.left = (10 + left) + 'px';

    99         li.style.top = (10 + top + (i * height)) + 'px';

   100     }

   101 }

   102 

   103 function getOrder() {

   104     var order = new Array(lis.length);

   105     for (var i = 0; i < lis.length; i++) {

   106         order[i] = lis[i].id.substring(1, 100);

   107     }

   108     return order.join(',');

   109 }

   110 

   111 function setOrder(id_list) {

   112     /* Set the current order to match the lsit of IDs */

   113     var temp_lis = new Array();

   114     for (var i = 0; i < id_list.length; i++) {

   115         var id = 'p' + id_list[i];

   116         temp_lis[temp_lis.length] = document.getElementById(id);

   117     }

   118     reIndex(temp_lis);

   119     lis = temp_lis;

   120     draw();

   121 }

   122 

   123 function addEvent(elm, evType, fn, useCapture)

   124 // addEvent and removeEvent

   125 // cross-browser event handling for IE5+,  NS6 and Mozilla

   126 // By Scott Andrew

   127 {

   128   if (elm.addEventListener){

   129     elm.addEventListener(evType, fn, useCapture);

   130     return true;

   131   } else if (elm.attachEvent){

   132     var r = elm.attachEvent("on"+evType, fn);

   133     return r;

   134   } else {

   135     elm['on'+evType] = fn;

   136   }

   137 }