i got a sortable list script that works perfect, but, i would like to make a minor change, and i just cant figure it out.
i want the first 7 items to be green, and the rest to be blue. problem is, i cant figure out how to get one of the green ones to turn blue if you are to drag it below the top 7 items, vis versa. i attempted to do it with php, and it works to have the first 7 green, but, when i start dragging, the colors dont change. need a way to add it to the little bit of JS at the top of the script.
PHP Code:
<?
require('db.php');
$demo = new SortableExample();
$list = $demo->getList();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sortables Ajax Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js"></script>
<script>
Event.observe(window,'load',init,false);
function init() {
Sortable.create('listContainer',{tag:'div',onUpdate:updateList});
}
function updateList(container)
{
var url = 'ajax.php';
var params = Sortable.serialize(container.id);
var ajax = new Ajax.Request(url,{
method: 'post',
parameters: params,
onLoading: function(){$('workingMsg').show()},
onLoaded: function(){$('workingMsg').hide()}
});
}
function handleResponse(req) {
// this function will fire after the ajax request is complete...but we have nothing to do here
}
</script>
</head>
<body>
<div id="listContainer">
<?
$break = "\r\n";
foreach($list as $item) {
if ($item['display'] <= 7) {
echo '<div class="top_menuItem" id="item_' . $item['id'] . '">' . $item['email'] . '</div>' . $break;
} else {
echo '<div class="menuItem" id="item_' . $item['id'] . '">' . $item['email'] . '</div>' . $break;
}
}
?>
</div>
<div id="workingMsg" style="display:none;">Updating database...</div>
</body>
</html>
any help is greatly appreciated. thanks in advance.
Posting Permissions
Bookmarks