| addEvent(window, 'load', reorder_init); |
| |
| var lis; |
| var top = 0; |
| var left = 0; |
| 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; |
| } |
| } |