Saving a reordered list

16 Apr 2005 54 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

Update 05/11: version 0.2 of the DHTML Library has a helper function to “serialize” the order of a list:

ToolMan.junkdrawer().serializeList(myList)

It returns a string representation of the list as described in the remainder of this post.

Tim Erfle and several others have asked a question like the following:

Is there anyway to report the order of the list after it has been sorted by the user? Its a super cool script, but it would be helpful if store the user modified order in the database.

Because the sorting is done by rearranging elements in the DOM, all you have to do is iterate over the parent element’s children to extract the new order. For example:

function foo(listID) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemsString = "";
    for (var i = 0; i < items.length; i++) {
        if (itemsString.length > 0) itemsString += ":";
        itemsString += items[i].innerHTML;
    }
    alert(itemsString);
}

To use this in a form submit replace alert(itemsString) with something like myHiddenInput.value = itemsString. Or you could stuff itemsString in a cookie or pass it back to the server with XMLHttpRequest. The above example uses items[i].innerHTML which works fine so long as your list items are plain text. A better approach is to give each LI element a unique identifier. You can use the ID attribute or — if you’re not concerned about valid XHTML — invent a new attribute to use. A list would look something like this:

<ul>
    <li listID="325"><a href="...">Copper</a></li>
    <li listID="27"><a href="...">Gold</a></li>
    <li listID="131"><a href="...">Gold</a></li>
    ...
</ul>

And use a script like this to extract the order:

function foo(listID, formInput) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemIDs = "";
    for (var i = 0; i < items.length; i++) {
        if (itemIDs.length > 0) itemIDs += ":";
        itemIDs += items[i].getAttribute("listID");
    }
    // do something with itemIDs
}

54 Comments (+add yours?)

ig2.nacho
Apr 18, 2005 @ 16:09:57

Hi Tim… wonderfull script!, but, i want to see an example using this script in a button saving the order…

Reply
Tim Taylor
Apr 19, 2005 @ 09:01:18

The next update to my examples may include an demonstration of saving the order.

Reply
Tim Taylor
Apr 27, 2005 @ 02:39:14

The new version of [DnD Sortable Lists](http://tool-man.org/examples/sorting.html) now demonstrates the technique I described for saving a reordered list. All the example lists remember their order (via cookies).

Reply
matt55
May 09, 2005 @ 04:50:09

Hi Tim
I’m building a form in PHP and I want to use your wonderful “drag & drop”.
My form sends datas in a SQL database.

But I don’t know how save the result of the sort.

Can You help me ?

Thanks for helping

Matt

Reply
Tim Taylor
May 09, 2005 @ 13:44:25

Matt,

You need to use a [hidden HTML input and JavaScript][1] to fill in the serialized version of the list when the [form is submitted][2].

[1]: http://irt.org/script/form.htm#3
[2]: http://irt.org/script/form.htm#7

This requires that the user still clicks a “Save” button. If you want the reordered lists saved automatically you need to look at something like [Ajax][3].

[3]: http://www.google.com/search?q=Ajax+javascript+XML

Reply
matt55
May 10, 2005 @ 08:02:55

Thanks for this answer.
Unfortunately I did not succeed in doing what you propose to me.

Is it possible to register the result of the list in a field and
then that changes automatically when the user made of the
modifications ?

Thanks for helping if you have time.

Matt

Reply
ameketa
May 11, 2005 @ 14:33:44

Matt,

There are two basic possibilities here. The first step, though, is to write a javascript function that saves a text version of the current order of the elements, like this:

function saveOrder(listId) {
var list = document.getElementById(listId);
var items = list.getElementsByTagName(‘li’);
var ids = ”;
var hiddeninput = document.getElementById(‘myhiddenfield’); // the input field storing the order

for (var i = 0; i < items.length; i++) {
if (i > 0) ids += ‘|’;
ids += id;
}

hiddeninput.value = ids;
return true;
}

Then choose whether you want to calculate the new order at the end of a drag event (which is probably unnecessary if you’re not using ajax) or just right before you submit the form. If you want it to get calculated before form submission, add an event handler to your tag, as in:

where “myListsId” corresponds to the “id” attribute of the unordered list. You can then explode() the value in PHP into an array, and iterate over the array to save the order.

Reply
ameketa
May 11, 2005 @ 14:37:37

Ack. Some things were mis-auto-translated there by wordpress.

Reply
matt55
May 13, 2005 @ 01:58:03

Sorry the post contained code.

Hi,

This is a very good function. But when I send my request to the database, results of ordered list are not write in the base.

I have no error message with my PHP script.

Someone understands what it is wrong ?

Here is my code.

Javascript function:

function saveOrderList(listId) {
var list = document.getElementById(listId);
var items = list.getElementsByTagName(‘li’);
var ids = ”;
var hiddeninput = document.getElementById(‘q2′); // the input field storing the order

for (var i = 0; i 0) ids += ‘|’;
var id = items[i].getAttribute(“itemID”);
ids += id;
}

hiddeninput.value = ids;

return true;
}

My hidden input:

My submit :

My list:

a
b
c
d

My php script:

I hope it works and that you can help me.
The Javascript function have been modified by Antares.

Thanks
Matt

Reply
Tim Taylor
May 23, 2005 @ 22:29:07

Looks like either WordPress or the Markdown plug-in is insisting on backslash escaping things in code blocks. Works fine for posts, but not for comments. Hmm…

Reply
junado
Jun 23, 2005 @ 11:28:57

I don’t know if I’m too late, but I’m using the tool-man library for reorganising a list in a user specified order. Had to add a little function in the core.js file to do what I wanted, but here’s how it works.

Function added to core.js
` writeListOrder : function(id, dest) {
var list = ToolMan.junkdrawer().serializeList(document.getElementById(id))
document.getElementById(dest).value = list
},`

Button to save changes:
“

As you must have guessed, *numeric* is my list’s id, while *liste* is an hidden input field where I write the ordered list.

Each item in my list can be disabled/enabled on the main page with a checkbox named *checkbox#* where *#* correspond to an increasing integer to identify each field and is set as the unique id of my item in the database (using a loop to load all the items). Then using PHP to update the table, I do this:

`if ($action == “sauvegarder”) {
$i = -1;
$ordre = explode(“|”, $_POST['liste']);
foreach($ordre as $num) {
$i += 1;
if ($_POST['checkbox'.$num] != 1) { $check = 0; } else { $check = 1; }
$sql = “UPDATE artisteici SET ordre=’”.$i.”‘, actif=’”.$check.”‘ WHERE numero=’”.$num.”‘”;
$save = mysql_query($sql) or die(mysql_error());
}
}`

My MySQL table uses a column called *order* where I enter the order took from the list. Therefore, when my page is loaded (the one the user views), I sort my results using the “order” column. I hope I made myself clear enough, if you have any question be sure to ask.

Reply
newbee
Aug 04, 2005 @ 14:06:34

Hi !
I saw your script it a very nice one.

I am trying to use your script to get the reordered values and save it using PHP.

Could you show me how to do it step by step?

Thanks

Reply
losmurfs
Aug 26, 2005 @ 13:03:56

Given:

One
Two
Three

How do I return the li bodies instead of the li ids? That is to say One|Two|Three instead of 1|2|3?

Reply
losmurfs
Aug 26, 2005 @ 13:06:21

In the above, replace the code sample with this:

<ul id=”aList”>
<li id=”1″>One</li>
<li id=”2″>Two</li>
<li id=”3″>Three</li>
</ul>

Reply
losmurfs
Aug 26, 2005 @ 13:07:07

I give up, I’m sure you’ll know what I mean.

Reply
alancece
Oct 01, 2005 @ 00:41:22

Hey, I don’t know if I’m too late with this, but I know all the hype is built up around AJAX, but if you guys want a simpler implementation regardless of what server-side language why not just use some simple Remote Calling. There is a beautiful example over at 15 seconds by Rajesh Toleti.
http://www.15seconds.com/issue/050922.htm
Take a look at that, it’s written in .net, but i was able to write it in standard asp within a few minutes. If anyone needs some help just shoot me an email, alan@alancece.com

Reply
grguth
Mar 22, 2006 @ 17:07:08

I copy the code to my server and everything runs perfectly except the order is not saved. Has anyone else had this problem?

I have tried the other examples posted and continue to get errors on the following line:

var items = list.getElementsByTagName(“li”);

Any help would be appreciated…

Reply
grguth
Mar 23, 2006 @ 09:12:58

I did figure it out somewhat… The save works in IE and not Firefox. I was using Firefox and wasn’t seeing the save happening…

-Greg

Reply
magichat
Mar 24, 2006 @ 10:28:54

I have adapted what has been recommended here to prevent the need for the user to click a form button to make the update. Whenever the user finishes dragging an item, the database is updated. I admit that if the users wants to update every item it will use lots of queries, but at the end of the day, it is nicer for the user!

I needed to let users sort a bunch of links (their favourites on my site), so in the database each favourite had a position stored with it, so I can display the list in the right order without having to the functionality provided by tool-man (and I use these positions to calculate the most popular favourite across all users etc…)

To do this, I edited the ‘dragsort.js’ file, and added a call to a function in the _onDragEnd function:
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
updateDB();
}
The function updateDB() creates the string of orders as mentioned above (x|y|z):
function updateDB() {
var list = document.getElementById(‘draggable’);
var items = list.getElementsByTagName(‘li’);
var ids = ”;
for (var i = 0; i 0) ids += ‘|’;
var id = items[i].getAttribute(‘heading’);
ids += id;
}
if (document.getElementById(‘favorder’).value != ids) {
document.getElementById(‘js_updater’).src = ‘/js_tracker.php?updateorder=’ + ids;
document.getElementById(‘favorder’).value = ids;
}

return true;
}
The function relies on there being a hidden input field named favorder, and the UL has id=”draggable”. Also, an image with 0px width and height, and id is “js_updater”. This is purely relevant for my site, and could be generalised by passing in IDs…

So, when the order of the list is changed, the picture’s source is changed to /js_tracker.php?updateorder=x|y|z

The js_tracker file is a PHP script that interfaces with the database:
$order = explode(“|”, $_GET[updateorder]);
if (strlen($order[0]) > 0) {
foreach ($order as $position => $id) {
$position++;
mysql_query(“UPDATE SET position = $position WHERE = $id”);
}
}

Hope this helps someone!

Reply
tech_india
Apr 12, 2006 @ 03:30:46

Hi,
I am looking for using this concept in my web site. But the different thing is that i am not using “li” but i have “div’s” and in these “div’s” i have multiple table’s. I need to shuffle these “div’s” and not the tables. Then i need to store the name of the div’s and there current order in DB and when the page loads next time i want that after retreving the order of div’s from DB i should be able to render it on the page. the table’s in each “div” contains data that is generated dynamically. Can anyone help me on this?

Thanks

Reply
tech_india
Apr 12, 2006 @ 03:32:05

Hi,
Please mail me the solution of above query at sachin_3_16@yahoo.com

Thanks

Reply
tech_india
Apr 12, 2006 @ 03:34:47

Hi,
The ID is “sachin_3_16@yahoo.com”

Thanks,

Reply
digitalpacman
May 08, 2006 @ 20:24:07

Hello. I was wondering if you would be interested in working with me in order to enhance your software to add the functionality to be able to drag items into sub categories. I’ve been working on it, it seems tough, and am seeking assistance. What I mean is instead of inserting before or after, you’d be inserting inside a new element. For the most part I have alot of it down, but its extremely buggy.

Let me know if you’re interested. I’m posting this where ever I can find an input box so you can see it.

Reply
pmcelhaney
Jul 13, 2006 @ 14:14:04

If all you want is to save the order when a form is submitted, put a hidden input field inside the list item itself.

United States

United Kingdom

Now there’s no Javascript or non-standard HTML. Just post the form; the countryCodes will be posted in the order in which you left them.

Patrick

Reply
scriptfury
Jul 28, 2006 @ 13:05:22

Hi, first time caller long time listener.

I’d like to say I am a big fan of the tool-man script, absolutely bang-up job.

That being said I would like to ask a question about the ordering and arrangement of the 2d lists and I was hoping that you could answer it for me.

Given that the example arranges the elements left to right top to bottom, like so…

1 2 3
4 5 6
7 8 9

Is it possible to arrange the list top to bottom left to right like this?

1 4 7
2 5 8
3 6 9

I know by changing the float property to right I can arrange it like this…

3 2 1
6 5 4
9 8 7

But I don’t think that CSS any other defined floats (except for none).

Secondly I noticed that the lists always snap to the RHS of any table cell they are in is there away to center them?

Thank you for your time, I hope my questions are not to elementary. Once again big fan.

SF

Reply
Ghost
Sep 04, 2006 @ 03:24:12

Using matt55′s example code shown on 5/13/2005,
I got the same results… Only I changed the
hidden input field name to match from q2 to q1.

Like grguth on 3/23/2006, it works fine in
Internet Explorer, but fails in Firefox.

Any Ideas? I’m running Firefox 1.5.0.6…

Thanks,

-Ghost

Reply
Ghost
Sep 04, 2006 @ 11:56:43

My problem is that when I use a hidden input field to
send the data to PHP, it works in IE, but not in Firefox.

I’m using the following code:

function saveOrderList(listId) {
var list = document.getElementById(listId);
var items = list.getElementsByTagName(‘li’);
var ids = ”;
var hiddeninput = document.getElementById(‘listarray’); // the input field storing the order

for (var i = 0; i 0) ids += ‘|’;
var id = items[i].getAttribute(“itemID”);
ids += id;
}

hiddeninput.value = ids;

return true;
}

alpha
bravo
charlie
delta
echo
foxtrot
golf
hotel
india
juliet
kilo
lima
mike
november
oscar
papa
quebec
romeo
sierra
tango
uniform
victor
whiskey
xray
yankee
zulu

The form submits to:

\n”;
?>

Internet Explorer v6.0.2900 displays:
hidden value: o|b|c|d|g|i|j|k|l|m|w|y|t|x|z|s|p|h|n|q|v|f|u|a|e|r

While Firefox v1.5.0.6 displays:
hidden value:

Any help would be greatly appreciated.

Reply
Ghost
Sep 04, 2006 @ 11:58:45

Opps, my code example got trashed…

Reply
Ghost
Sep 04, 2006 @ 12:23:38

My problem is that when I use a hidden input field to
send the data to PHP, it works in IE, but not in Firefox.

I’m using the following code:

function saveOrderList(listId) {
var list = document.getElementById(listId);
var items = list.getElementsByTagName(‘li’);
var ids = ”;
var hiddeninput = document.getElementById(‘listarray’);

for (var i = 0; i 0) ids += ‘|’;
var id = items[i].getAttribute(“itemID”);
ids += id;
}

hiddeninput.value = ids;

return true;
}

alpha
bravo
charlie
delta
echo
foxtrot
golf
hotel
india
juliet
kilo
lima
mike
november
oscar
papa
quebec
romeo
sierra
tango
uniform
victor
whiskey
xray
yankee
zulu

The form submits to:

\n”;
?>

Internet Explorer v6.0.2900 displays:
hidden value: o|b|c|d|g|i|j|k|l|m|w|y|t|x|z|s|p|h|n|q|v|f|u|a|e|r

While Firefox v1.5.0.6 displays:
hidden value:

I would really appreciate any help you can provide…

Reply
Mandrx
Sep 16, 2006 @ 09:58:38

Try this one. It work both FF & IE….

Javascript Function :
`function post(){
list_var = junkdrawer.serializeList(phoneticlong)
document.order2.order.value = list_var
order2.submit()
}`

In Body :
`

apple
bud
clock
down
extra

`

In reorder.php :
`”;
for($x=0;$x”;
}
?>`

Hope it help…

Thanks

Reply
Mandrx
Sep 16, 2006 @ 11:05:24

Duh! [Click Here!](http://sbox.srv.ro/4u/readme.php)
=)

Reply
oto
Nov 30, 2006 @ 10:40:41

I have applied some of the information found here to try saving locations of entire moving divs (not restricted to lists). The method was quite successful. Here are the basics in case you’re interested:

1. I create movable divs with handles.
2. Using javascript, I use the ‘window.onmouseup’ event to do the following:
get the ‘document.getElementById(“boxHandle”).style.left’ & the ‘document.getElementById(“boxHandle”).style.top’ properties.
3. I then insert these properties in an array which is then inserted into an invisible form element.
4. I used an asynchronous xmlhttp query to submit this array to
a php file. The php file treats the array as a string.
5. This php file serializes the data and puts it in a text file.

This is all that is required to save the boxHandle location to a text file. Every time a user moves a box, the new location is saved transparently.

To load the information:
1. When the main page is loaded or refreshed, php code in the header downloads the data from the text file and deserializes it.
2. In the body of the document, php code inserts the deserialized data in another invisible form field.
3. The javascript ‘window.onload’ event is used to get the string from the invisible form element and the ‘document.control.loadedLocations.value.split(“,”)’ method is used to transform it back into an array.
4. The array is then used to set the ‘style.left’ and ‘style.top’ properties of the box.

The use of an array allows to have as many boxes as you like (only limited by size of xmlhttp query). This is the first time that I use javascript so this might not be the best way to do things (but it works!).

Reply
intensivex
Dec 07, 2006 @ 11:53:25

Hello oto,

I’ve been racking my brain for 2 weeks trying to figure out what you’ve just accomplished … impressive …

If i’m reading your comments accuratly, youve managed to capture the positions of the dragged elements and save these positions to file …

Question … would you be so kind as to provide me with a working sample of what youve just done? At this point I’m willing to donate a few bucks to save myself more time. (Please!)

Thanks in advance …

Respectfully,

Chris
chrisATintensivexDOTcom

Reply
oto
Dec 14, 2006 @ 10:00:50

Sure, no problem. I’d rather not publish it on this blog. Email me mark@otomotion.com

Mark

Reply
LizardMan
Dec 28, 2006 @ 17:12:09

I’ve integrated the code into something I’m working on and it works quite nicely, the only trouble is that I’ve got a button which will add a new item to the bottom of the list. How do I get new item to register and update the constraints?

I’ve tried and tried, but either the new item doesn’t work, or I get the new item working and the other items break.

Any chance of a “rehash()” or “addNew()” function?

Reply
director
Mar 12, 2007 @ 16:06:17

I would like to user your simplest one, two, three list reordering. For newbies, would it be possible for you to create a page with just this example and the code it uses.

Your examples are very impressive, but having them all in one file makes it a little harder to get started.

Thanks

Reply
Cel
May 06, 2007 @ 07:52:55

I have a problem at http://research.psychol.cam.ac.uk/~kl278/experiments/recruitment.php under the heading Favourite Foods : I’m using the script to sort a list of items by drag and drop and it works fine on its own.

The issue arises when I wish to submit the data in the listboxes and textboxes within the sortable list to a MySQL database to be recorded. Namely, the data that client enters into these listboxes and textboxes are passed through only for those entries that are not sorted within the list by drag and drop i.e. as soon as the user has drag and dropped one of the items, the data user has entered is not recorded in the database for that item – and it doesn’t matter whether the user enters the data before or after the drag and drop. And to be more specific, the data is actually recorded if you just move the list item around on spot (without dragging it across any items), but as soon as you move it across, even without release (drop) and come back to the original location, data is not recorded. In other words it seems that the ‘drag across’ event in the sortable list script seems to erase the user input or seems unable to pass it through form submit … I hope this description is understandable. How do I get all data to pass through, irrespective of how much the user sorts the list ?

Many thanks !

p.s. I’m using Form Tools to record the submitted data in my MySQL database (http://www.formtools.org/) and I believe there should be no problems on that side.

Reply
Trackback: Accessing list out another class - Java Forums
mjabon
Feb 14, 2008 @ 17:35:03

Hello. I have a question that I would really like help on. I’m trying to understand how you do the repositioning – it seems you use relative position for the list items, but is the table absolutely positioned? I would ideally like to make lists sortable with no other information than the relative positions of the list elements, but I find that when I drag the elements the mouse cursor jumps off the element and also the whole table moves to compensate for the moving element….

Reply
alexi_dst
Jul 09, 2008 @ 12:35:46

Guys I found solution to the problem where it doesnt work in Firefox but works in IE

in this change to

For more details: http://www.webdeveloper.com/forum/showthread.php?p=907759#post907759

Enjoy!!

Reply
frankblack
Jul 11, 2008 @ 05:46:03

hi Matt55,

several things in your code are wrong.

a) Your javascript tries to get the wrong id. Relating to your hidden input form field it must be q1 NOT q2
b) Your javascript cannot get the id, because the hidden input form field has none. Just add id=”q1″ to that form field

Instead of itemID as an attribute I would rather use title as attribute, because this is an allowed attribute.

Works for me!

HTH

Reply
shalinjshah
Nov 08, 2008 @ 04:32:01

Hi, I am facing issue where I am using this script and trying to put combo box inside block. My page need that combo box to let user pick some option and each block has combo box. Problem with safari is when I put this combo box inside the box, combo box is not clickable now. Users can’t pick any options from combo box.

Is there any fix for this?

-Shalin

Reply
shalinjshah
Nov 08, 2008 @ 14:54:10

hi, I am trying to use drop down box and place it in to sortable list. But when I do that drop down control does not work in safari and users can’t select any options from drop down.

Is there workaround for this problem?

Reply
Xjiard
May 20, 2009 @ 16:03:03

This is a most excellent script. But I was playing around with your version 0.2 here, and though it works great in Chrome and FF, it gives an error in IE when you release the mouse button. Here’s what I get:

Invalid argument.
drag.js, Line 122, Char 4

Of course, IE has horrible debugging, so this message probably doesn’t help any (didn’t help me). Any ideas what’s causing this error? I’m using IE8 (both with and without compatibility enabled.

Thanks!

Reply
genxceo
Jun 23, 2009 @ 22:17:50

I’m having the same problem with IE8. I LOVE this script! It’s incredible!! Are there any fixes available or could someone point me in the right direction?

Thanks!!

Reply
beguinner
Jul 15, 2009 @ 13:15:14
Hello your scripts works fine

I have a question : I try to make a dynamic sorting drag and drop list who can be refresh with ajax or a simple document.getElementById(‘myid’).innerHTML like :
```
function refr() {
     var mylist="";
 mylist='<li itemID="1">one</li><li itemID="2">two</li><li itemID="3">three</li>';
 document.getElementById('numeric').innerHTML=mylist;
}
<A Href="javascript:refr()">refresh</A>
```
refresh works.

But the elements of the of the list are not draggable after …

Could you help me please ?

Thanks
Reply
jasondavis
Jul 22, 2009 @ 00:56:22

HI guys I have been using this script for a couple years now on a social network site and I really don’t want to change to another script. Users on my site have “friends” and this script is used to allow them to save there “top” friends in the order they like. I have a drop down form where they can pick the number of top friends they like for instance “12″ in firefox this highlights 12 of the table cells to make them a different color, also there is a form to save this order the output is saved in mysql like this 1|2|3|4|5 and also the form submits the number 4, 8, OR 12 from the dropdown selector for quanity of top friends, also sould not if I pick 12 then out of hundreds of draggable friends, the script knows to only save the first 12 or whichever number is picked.

1 issue is in google chrome and internet explorer, the top 12 are no longer highlighted with a different color, this only works in firefox now however, in IE and chrome the 12 even though not highlighted the script still functions correctly

2nd issue, instead of hitting a save button that submits these 2 fields myTopFriends and topNumber to my php script which updates mysql, I would really like to make this work with a simple ajax call to submit these automaticly after moving a top friends, I know where to put such code at on mouse up or whatever but I can not figure out which code to use, I saw in the comments above where a guy said he used ajax, I tried his posted method but it does not work for me, any help greatly appreciated

Currently my version has a form that allo

Reply
jasondavis
Jul 23, 2009 @ 13:09:02

I really need to make this script update using AJAX I would really appreciate if anyone can do that I can pay for this hack

Reply
emillium
Sep 02, 2009 @ 06:38:41

Hi all,

To fix the issue with IE8 replace line 122 of drag.cs (dragEvent.group.element.style.zIndex = originalZIndex) with:
dragEvent.group.element.style.zIndex = ‘auto’

I am not sure what downstream effect this will have, and I guess this depends on your implementation. It does fix my issue with IE8.

Can anyone elaborate on the reason for the zIndex being set to the originalZIndex? Is there an instance when it will not be auto?

Thanks.

Reply
jb
Jun 14, 2011 @ 10:14:18

Hi all,

I implemented the Sorting in 2D successfully, except when used with IE8.

Even the example (http://tool-man.org/examples/sorting.html) does not work with IE8 – gives an Invalid Argument error (line 122 in the drag.js library).

Has anyone else encountered this?

More importantly: how do I fix this?

Thanks!

Reply
RasThavas
Aug 16, 2011 @ 17:35:25

Look at the post above yours. The fix is there. Thanks emillium.

To fix the issue with IE8 replace line 122 of drag.cs (dragEvent.group.element.style.zIndex = originalZIndex) with:
dragEvent.group.element.style.zIndex = ‘auto’

Reply
Pads
Oct 21, 2011 @ 01:04:10

Hi Tim
I have done drag and drop using TOolMan.Now I have to track/print the dragged item position number (current item position number), target item position number Where I want to drop the Item.For example I have the following items in my list:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
item 9

Let us suppose I draged ’Item 6′ to ‘Item 8′, now I have to save the position number or position of ‘Item 6′ and ‘Item 8′ .

I couldnot figure it out how can I do it?

Any ideas please help me!

Reply
Pads
Oct 25, 2011 @ 08:07:30

Hi,
I need your help.
I’ve two problems
First, I need to track the following informations after drag and drop operation.
a:Source item coordinates(x and y )
b:Source item id.

c:Target item coordinates(x and y )
d:Target item id.

Second,I have two containers one for drag and drop and another for resort (all the drag and drop images) container. When I drag and drop the images
in container 1,its immediately resort to container2 .

Could you help me please ?

Thanks

Reply
- Sergiu
  Dec 03, 2011 @ 13:31:13
  
  Hello , just checking this script , works fine but when trying to add a mootols library it wont work any more .. what to do to have it working with mootols as well .. is something dealing with $ sign ???
  
  Will appreciate any answer
  Thanks
  
  Reply