drag and drop sort

Hello, I found a cool drag and drop and sorting script. It works fine but I need to make modifications. The original script lets you drag and drop and you can hit an inspect button to bring up an alert to show you the order.

This script uses cookies to store the order. I do not know a great deal about JS so I am not sure from their script how to find the cookie and get the info out that is being alerted. I will be using imageIDs from a database query for the IDs that are being alerted and in the sorting. The thing is, I would like to take the sort order when they are done and force the user to hit a save button that would then post to a php page and I could set the cookie up. Again my knowledge is limited to what is going on here.

Any help in accomplishing this would be great. Thank you


here is the JS function that alerts the info

ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]

array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join('|')
},

inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},

restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return

var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;

var IDs = cookie.split('|')
var items = ToolMan.junkdrawer()._itemsByID(list)

for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},

_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier

identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;

identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;

// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},

_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName('li')
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},

trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, '$2')
}
}



Here is a link to the example

Example page (http://www.photogap.net/drag_drop_test/sorting.html)

Reason I would like control over the cookies in php is that this script does not seem to be consistent. If you drag one image and hit refresh it stays the same but then move another and hit refresh. most of the time in IE, on the second refresh, the image goes back to the previous position. I would liek to be able to set the cookies via save in a php post and access via $_cookie_vars[].