Stuart Wexler wrote:
Hi,
I want to set up a JS/DHTML page that allows someone to graphically/manually
rank items. For instance, they would have 10 movies, and they can move
things around, 1 to 10, according to their preference. Internally this
would be recorded in an array. Are there any sites out there that show
how to do this? Any which show how to do it cross-browser?
Thanks,
Stu
I have used an up and down arrow on each line to achieve a similar
effect in a table. The arrows are displayed using characters from the
"wingdings" fonts, and the onclick functions are set to moveRowDown()
and moveRowUp().
/* Get the ancestor element of any tag name.
So you can for example get the enclosing <TR>
given any element in a table.
*/
function getParentByTagname(element, tag)
{
while (element != null && element.tagName != tag)
{
element = element.parentNode;
}
return element;
}
/*
Copy all elements from one parent element to another
*/
function moveElements(fromElement, toElement)
{
while (fromElement.firstChild)
{
var n = fromElement.firstChild;
fromElement.removeChild(n);
toElement.appendChild(n);
}
}
/*
Move a table row down, rotating to the top
if it's the last row.
*/
function moveRowDown(event)
{
event = window.event;
var fromRow = getParentByTagname(event.srcElement, "TR");
var fromRowNumber = fromRow.rowIndex;
var theTable = getParentByTagname(fromRow, "TABLE");
var tableRows = theTable.rows;
var tableHeight = tableRows.length;
var toRowNumber = fromRowNumber + 2;
if (fromRowNumber == (tableHeight - 1))
{
toRowNumber = 1;
}
var newRow = theTable.insertRow(toRowNumber);
moveElements(fromRow, newRow);
theTable.deleteRow(fromRow.rowIndex);
}
/*
Move a table row up, rotating to the bottom
if it's the first row.
*/
function moveRowUp(event)
{
event = window.event;
var fromRow = getParentByTagname(event.srcElement, "TR");
var fromRowNumber = fromRow.rowIndex;
var theTable = getParentByTagname(fromRow, "TABLE");
var tableRows = theTable.rows;
var tableHeight = tableRows.length;
var toRowNumber = fromRowNumber -1;
if (fromRowNumber == 1)
{
toRowNumber = tableHeight;
}
var newRow = theTable.insertRow(toRowNumber);
moveElements(fromRow, newRow);
theTable.deleteRow(fromRow.rowIndex);
}