473,321 Members | 1,748 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

drag and drop ranking system

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
9 6844
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
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
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
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
"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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: WindAndWaves | last post by:
Hi everyone, Has anyone got any experience with drop and drag in Access? I would like to make a calendar style form where my users can drop and drag appointments.... I am using Access 2003...
2
by: SamSpade | last post by:
There seems to be two ways to put things on the clipboard ( I don't mean different formats): SetClipboardData and OleSetClipboard If I want to get data off the clipboard do I care how it was put...
3
by: Ajay Krishnan Thampi | last post by:
I have a slight problem implementing 'drag and drop' from a datagrid to a tree-view. I have pasted my code below. Someone please advice me on what to do...pretty blur right now. ==code== ...
0
by: Yavuz Bogazci | last post by:
Hi, i have build a form with a listbox and the function that he user can drag and drop files from the windows explorer in this listbox. this works for me when i start it on my localmachine. ...
0
by: James Allen Bressem | last post by:
Do drag n drop in VB.Net in ten lines of code - (too easy) I was searching through the MSDN documentation trying to figure out how to do drag n drop and I found a sample program. The sample...
1
by: Manuel Canas | last post by:
Hi there, This is the code that I am using to drag items from a list box and drop them into a text box. I'm not sure, but from what I know, each item on a list box is an object. Let say I get a...
3
by: VB Programmer | last post by:
In VB.NET 2005 (winform) any sample code to drag & drop items between 2 listboxes? Thanks!
2
by: ViRi | last post by:
I am wringing a small and lite Media Player to fit my custom needs for usage while programming. I had written some drag and drop functionality like i do with other programs, but hey, the ActiveX...
2
by: Andreas Mueller | last post by:
Hi All, I'm trying to show a context menu during a drag drop operation similar to the windows explorers right click drag and drop behavior (A full working sample is at the end of the post): ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.