drag and drop ranking system

S

Stuart Wexler

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
 
B

Bagbourne

Stuart said:
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);
}
 
L

Lasse Reichstein Nielsen

Bagbourne said:
I have used an up and down arrow on each line to achieve a similar
effect in a table.

That is one method. You could also have a way of selecting a row, and
just use one set of up/down arrows.

For maximal browser compatability, you can use a select element
instead of a table. Then it works for all browsers, even those that
don't allow you to change the structure of the document at runtime.
The arrows are displayed using characters from the
"wingdings" fonts,

That is highly dubious. Not all browsers/operating systems have access
to that font, and the most common way of using it will break in
moderne browsers, even if they do have access to the font. (Just
setting the font to "windgdings" and writing "%E1" will not give an up
arrow, since %E1 is "á" in Unicode and iso-latin-1 and wingdings
doesn't contain an "small a acute").
and the onclick functions are set to moveRowDown()
and moveRowUp().


function getParentByTagname(element, tag)
{
while (element != null && element.tagName != tag)

If you want to use this code in XHTML, you should consider the
case of the tag. In XHTML, the tagName is lower case, so you could
change the comparison to
... element.tagName.toUpperCase() != tag
and it would work in both HTML and XHTML
{
element = element.parentNode;
}
return element;
}

function moveRowDown(event)
{
event = window.event;

For cross browser compatability (I.e., anything except IE), this line
should be
event = event || window.event; // IE sucks
(comment optional)
var fromRow = getParentByTagname(event.srcElement, "TR");

Likewise, "event.srcElement" is IE only. You can use
var target = event.target || event.srcElement;
and then use "target" instead.


Otherwise it seems fine.

/L
 
S

Stuart Wexler

Thanks folks. Any ideas how might one go about modifying this to work with
drag and drop as opposed to up and down arrows? I want to be able to move
someone efficiently from rank 2 to 7 instead of, say, moving from 2 to 3
then 3 to 4 then 4 to 5, etc.

-Stu
 
B

Bagbourne

Lasse said:
That is one method. You could also have a way of selecting a row, and
just use one set of up/down arrows.


I did think of trying to do that with checkboxes to select the row, but
it seemed easier for me and the user like this.

Thanks for the hints. In my case it's IE only as specified by the client.

How could I specify arrow images in a button without an arrow GIF? I
know Unicode has some arrow images, but how do I specify Unicode? And
the underlying font has to contain all thise Unicode characters and most
don't (I think)
 
L

Lasse Reichstein Nielsen

Stuart Wexler said:
Thanks folks. Any ideas how might one go about modifying this to work with
drag and drop as opposed to up and down arrows?

That is *much* harder (and some more "much"'es if you still think it
is easy).

Mostly, the current code is fairly unusable, except the function that
moves a row from one position to another. On top of that, you will have
to create code to handle the dragging. It is doable, but not easy.
One of the problems is that dragging will probably be mistaken by the
browser as selecting text.

If anything, you should click on the row to move, and then again on
the target row. It is safer, and probably more ergonomic too, than
dragging.

/L
 
L

Lasse Reichstein Nielsen

Bagbourne said:
Thanks for the hints. In my case it's IE only as specified by the client.

If he actually asked for it to be IE only, I would get his head
examined. If he just didn't care whether it works in other browsers,
he's quite normal (sadly).
How could I specify arrow images in a button without an arrow GIF? I
know Unicode has some arrow images, but how do I specify Unicode?

You specify Unicode characters in HTML with the &# prefix. Two arrows
you could use are ⇧ and ⇩ (outline arrow up and down).

In Javascript, you can write Unicode literals in strings with the
\u prefix. I.e., "these are arrows: \u21e7 and \u21e9". In ECMAScript,
all strings are unicode strings.

Sadly, it doesn't seem like IE understands those two arrows in its
default font setting (even though Opera and Mozilla do on the same
machine, WinXP-Pro+IE6). If I set the font to "Arial Unicode MS", then
they become arrows.
And the underlying font has to contain all thise Unicode characters
and most don't (I think)

If the current font doesn't have a glyph for a specific unicode code
point, the browser should try other fonts.
When you specify more than one font:
font-family : Helvtica, Swiss, sans-serif;
the fonts are tried from left to right to find one that has the needed
glyph (in conformant browsers, at least).

It seems that the default fonts for IE 6 are not unicode fonts.

/L
 
I

Ivo

Then perhaps it is best not to rely too much on any fonts, but instead
use good ol' ascii art for your arrows:

\/ down up /\
 
L

Lasse Reichstein Nielsen

Then perhaps it is best not to rely too much on any fonts, but instead
use good ol' ascii art for your arrows:

\/ down up /\

TWO letters?!? What's that all about. When I was young we only got to use
one letter for each. And on Sundays we could only go up!

/L '^ or v'
 
D

dan

Then perhaps it is best not to rely too much on any fonts, but instead
use good ol' ascii art for your arrows:

\/ down up /\

this is kinda tough
you are combining multiple concepts, but heres how i would break it
down

i would create some objects, like a movie object, to hold the image
,the title, some type of id and any other info

then, you need to use javascript to position the objects, inside of
divs, on your page
but it needs to make sense somehow, i dont know about that one

to drag it, you need to code for a mouse down event and have the div
track your mouse movements and follow it
and when releasing, drop it into a position of some sort

shuffling would be a real pain
for example, if you have something in spot 2 but move #5 into 2, you
would need to remove 5 from its spot, and push everything down until
you hit the empty spot, #5

good luck with all that

look into flash
or arrows
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top