137 lines
3.7 KiB
JavaScript
137 lines
3.7 KiB
JavaScript
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;
|
|
}
|
|
}
|