I've been forgoing sleep the last few days as I power through some fairly uninteresting code-based things. So I don't have a ton of time or energy tonight, but I did want to give you something interesting to chomp on while I go catch up on my sleep.
The code below is a VERY basic HTML page using the Javascript libraries Prototype and Scriptaculous to show off some basic drag, drop, and sort features I wil lbe putting into practice for Draftwizard player rankings soon.
Tomorrow, or as soon as I get a few extra minutes, I'll go over the what, how, and why bits of this stuff. Until then, you'll just have to play with it on your own.
Enjoy!
<html>
<head>
<title>Testing Drag and Drop with Sortable Results</title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<table border="0" cellapdding="10" cellspacing="0">
<tr>
<td valign="top" width="50%">
< Div id="dropzone" style="border: thin solid rgb(0,0,0); height: 100; width: 100;"></div>
</td>
<td valign="top" width="50%">
< Div id="sortlist" style="padding: 5px;">
< Div id="name_kevin" style="border: thin solid rgb(0,0,0); padding: 3px;">kevin</div>
< Div id="name_brady" style="border: thin solid rgb(0,0,0); padding: 3px;">brady</div>
< Div id="name_catherine" style="border: thin solid rgb(0,0,0); padding: 3px;">catherine</div>
< Div id="name_timothy" style="border: thin solid rgb(0,0,0); padding: 3px;">timothy</div>
</div>
</td>
</tr>
</table>
<style type="text/css">
.hoveraction {
background-color: #FFFFAA;
}
</style>
<script type="text/javascript">
var people = ['kevin','brady','catherine','timothy'];
function makesort() {
Droppables.remove('dropzone');
Sortable.create('dropzone', {tag: "div",
// Do something about the new sorted order (ie. ajax call)
});
}
function makedrop() {
Droppables.add('dropzone', {hoverclass: 'hoveraction', onDrop: function(element) {
sortlist.removeChild(element);
Dropzone.appendChild(element);
makesort();
}});
}
window.onload = function() {
makesort();
for ($i=0;$i<people.length;$i++) {
var temp = 'name_' + people[$i];
new Draggable(temp,{revert:true,ghosting:true,onStart: function() { makedrop(); }});
}
}
</script>
</body>
</html>
