addEvent(window, 'load', reorder_init); var lis; var top = 90; var left = 545; var height = 30; function reorder_init() { lis = document.getElementsBySelector('ul#orderthese li'); var input = document.getElementsBySelector('input[name=order_]')[0]; setOrder(input.value.split(',')); input.disabled = true; draw(); // Now initialise the dragging behaviour var limit = (lis.length - 1) * height; for (var i = 0; i < lis.length; i++) { var li = lis[i]; var img = document.getElementById('handle'+li.id); li.style.zIndex = 1; Drag.init(img, li, left + 10, left + 10, top + 10, top + 10 + limit); li.onDragStart = startDrag; li.onDragEnd = endDrag; img.style.cursor = 'move'; } } function submitOrderForm() { var inputOrder = document.getElementsBySelector('input[name=order_]')[0]; inputOrder.value = getOrder(); inputOrder.disabled=false; } function startDrag() { this.style.zIndex = '10'; this.className = 'dragging'; } function endDrag(x, y) { this.style.zIndex = '1'; this.className = ''; // Work out how far along it has been dropped, using x co-ordinate var oldIndex = this.index; var newIndex = Math.round((y - 10 - top) / height); // 'Snap' to the correct position this.style.top = (10 + top + newIndex * height) + 'px'; this.index = newIndex; moveItem(oldIndex, newIndex); } function moveItem(oldIndex, newIndex) { // Swaps two items, adjusts the index and left co-ord for all others if (oldIndex == newIndex) { return; // Nothing to swap; } var direction, lo, hi; if (newIndex > oldIndex) { lo = oldIndex; hi = newIndex; direction = -1; } else { direction = 1; hi = oldIndex; lo = newIndex; } var lis2 = new Array(); // We will build the new order in this array for (var i = 0; i < lis.length; i++) { if (i < lo || i > hi) { // Position of items not between the indexes is unaffected lis2[i] = lis[i]; continue; } else if (i == newIndex) { lis2[i] = lis[oldIndex]; continue; } else { // Item is between the two indexes - move it along 1 lis2[i] = lis[i - direction]; } } // Re-index everything reIndex(lis2); lis = lis2; draw(); // document.getElementById('hiddenOrder').value = getOrder(); document.getElementsBySelector('input[name=order_]')[0].value = getOrder(); } function reIndex(lis) { for (var i = 0; i < lis.length; i++) { lis[i].index = i; } } function draw() { for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.index = i; li.style.position = 'absolute'; li.style.left = (10 + left) + 'px'; li.style.top = (10 + top + (i * height)) + 'px'; } } function getOrder() { var order = new Array(lis.length); for (var i = 0; i < lis.length; i++) { order[i] = lis[i].id.substring(1, 100); } return order.join(','); } function setOrder(id_list) { /* Set the current order to match the lsit of IDs */ var temp_lis = new Array(); for (var i = 0; i < id_list.length; i++) { var id = 'p' + id_list[i]; temp_lis[temp_lis.length] = document.getElementById(id); } reIndex(temp_lis); lis = temp_lis; draw(); } function addEvent(elm, evType, fn, useCapture) // addEvent and removeEvent // cross-browser event handling for IE5+, NS6 and Mozilla // By Scott Andrew { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { elm['on'+evType] = fn; } }