By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,730 Members | 1,620 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,730 IT Pros & Developers. It's quick & easy.

drag and drop ranking system

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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);
}

Jul 20 '05 #2

P: n/a
Bagbourne <no***@noway.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

P: n/a
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


"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
Bagbourne <no***@noway.com> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 20 '05 #4

P: n/a
Lasse Reichstein Nielsen wrote:
Bagbourne <no***@noway.com> writes:

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.

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)

Jul 20 '05 #5

P: n/a
"Stuart Wexler" <St*******@comcast.net> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6

P: n/a
Bagbourne <no***@noway.com> writes:
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 &#x21e7; and &#x21e9; (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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

P: n/a
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 /\
Bagbourne <no***@noway.com> wrote in message news:<3F**************@noway.com>...
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)

Jul 20 '05 #8

P: n/a
sa*****@mail.com (Ivo) writes:
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'
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #9

P: n/a
dan
sa*****@mail.com (Ivo) wrote in message news:<80**************************@posting.google. com>...
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 /\
Bagbourne <no***@noway.com> wrote in message news:<3F**************@noway.com>...
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)


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
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.