Bueno aqui he podidio rescatar bastante y siento que me hacerco bastante a lo que quiero lograr....
Este codigo lo saque del enlace anterior... le di en Downloas vercion 2.0 y se me descargo entre otras cosas esto pero es lo que esta online...
en fin tengo este codigo
Esta pagina es sorting.html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Drag & Drop Sortable Lists with JavaScript and CSS</title>
<link rel="stylesheet" type="text/css" href="common/common.css"/>
<link rel="stylesheet" type="text/css" href="common/lists.css"/>
<style type="text/css"><!--
.statusbox {
font-size: 13px;
font-family: Monaco, monospace;
width: 15em;
}
ul.boxy li { margin: 0px; }
#phonetics td {
margin: 0px;
padding: 0px 1em;
vertical-align: top;
width: 100px;
}
#phonetic1 li, #phonetic2 li, #phonetic3 li { margin: 0px; }
#phonetic2 li {
margin-bottom: 4px;
}
#phonetic3 { margin-top: -4px; }
#phonetic3 li { margin-top: 4px; }
#phoneticlong {
margin-bottom: 1em;
}
#phoneticlong li, #buttons li {
margin-bottom: 0px;
margin-top: 4px;
}
#boxes {
font-family: Arial, sans-serif;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 300px;
}
#boxes li {
cursor: move;
position: relative;
float: left;
margin: 2px 2px 0px 0px;
width: 33px;
height: 28px;
border: 1px solid #000;
text-align: center;
padding-top: 5px;
background-color: #eeeeff;
}
#twolists td {
width: 300px;
vertical-align: top;
}
#twolists1 li {
font-family: sans-serif;
}
#twolists2 {
border: 1px dashed #fff;
}
#twolists2 li {
font-family: serif;
background-color: #eedddd;
}
.inspector {
font-size: 11px;
}
//-->
</style>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/core.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/events.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/css.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/coordinates.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/drag.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/dragsort.js"></script>
<script language="JavaScript" type="text/javascript" src="../source/org/tool-man/cookies.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer()
window.onload = function() {
junkdrawer.restoreListOrder("phoneticlong")
junkdrawer.restoreListOrder("boxes")
junkdrawer.restoreListOrder("buttons")
//junkdrawer.restoreListOrder("twolists1")
//junkdrawer.restoreListOrder("twolists2")
dragsort.makeListSortable(document.getElementById("phoneticlong"),
verticalOnly, saveOrder)
dragsort.makeListSortable(document.getElementById("boxes"),
saveOrder)
dragsort.makeListSortable(document.getElementById("buttons"),
saveOrder)
/*
dragsort.makeListSortable(document.getElementById("twolists1"),
saveOrder)
dragsort.makeListSortable(document.getElementById("twolists2"),
saveOrder)
*/
}
function verticalOnly(item) {
item.toolManDragGroup.verticalOnly()
}
function speak(id, what) {
var element = document.getElementById(id);
element.innerHTML = 'Clicked ' + what;
}
function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute("id")
if (id == null) return
group.register('dragend', function() {
ToolMan.cookies().set("list-" + id,
junkdrawer.serializeList(list), 365)
})
}
//-->
</script>
</head>
<body>
<form action="seba.php" method="post">
<!-- yeah, it's invalid XHTML. Suck it up, pedant-boy :) -->
<ul id="phoneticlong" class="boxy">
<li itemID="a">alpha</li>
<li itemID="b">bravo</li>
<li itemID="c">charlie</li>
<li itemID="d">delta</li>
<li itemID="e">echo</li>
<li itemID="f">foxtrot</li>
<li itemID="g">golf</li>
<li itemID="h">hotel</li>
<li itemID="i">india</li>
<li itemID="j">juliet</li>
<li itemID="k">kilo</li>
<li itemID="l">lima</li>
<li itemID="m">mike</li>
<li itemID="n">november</li>
<li itemID="o">oscar</li>
<li itemID="p">papa</li>
<li itemID="q">quebec</li>
<li itemID="r">romeo</li>
<li itemID="s">sierra</li>
<li itemID="t">tango</li>
<li itemID="u">uniform</li>
<li itemID="v">victor</li>
<li itemID="w">whiskey</li>
<li itemID="x">xray</li>
<li itemID="y">yankee</li>
<li itemID="z">zulu</li>
</ul>
<p><input class="inspector" type="button" value="Inspect" onclick="junkdrawer.inspectListOrder('phoneticlong')"/></p>
</form>
</body>
</html>
Dos cosas...
a pesar de que anda y hace lo que tiene que hacer este codigo me sale el tipico mensaje de error de javascript en la parte inferior izq del navegador... pero todo anda bien...
Segundo...
veo que cuando uno modifica el orden de las palabras estas se guardan en una cokie.. hay forma de mandar esta misma informacion desde un formulario (POST) a otra pagina por ejemplo prosesa para guardar el nuevo orden?¿
Pregunto es posible esto?
Alguien me puede ayudar?
