rvdb86 Posted March 3, 2009 Share Posted March 3, 2009 Hi, i am quite new to ajax so i apologise for any obvious mistakes! I am trying to build a file system that has several categories and within each category several pages, and i want the user to be able to change the order of the pages and categories by draging them above or below the others. The system gets all the categories from a MySql database (mysite_categories) and the same for the pages (mysite_pages) through PHP. I found a drag and drop tutorial on the internet which worked great for ordering the categories. But because the script created a javascript function specific to the id of the <ul> i ran into problems with the pages that reside within the <ul> of the categories. here is my script: index.php <?php require_once('database.php'); require_once('categories.php'); if (!dbConnect()) { echo 'Error connecting to database'; exit; } $categories = getCategories(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>phpRiot Sortable Lists</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous/src/scriptaculous.js"></script> </head> <body> <h1>phpRiot Sortable Lists</h1> <ul id="movies_list" class="sortable-list"> <?php $query = "select category_id, category_name from mysite_categories order by ranking, lower(category_name)"; $result = mysql_query($query) or die(mysql_error()); // Print out the contents of each row into a table while ($row = mysql_fetch_array($result)) { extract($row); ?> <li id="movie_<?= $category_id ?>"><?= $category_name ?> <ul id="page_list<?= $category_id ?>" class="sortable-list"> <?php $query2 = "select page_id, page_name from mysite_pages WHERE page_category ='$category_id' order by ranking, lower(page_name)"; $result2 = mysql_query($query2) or die(mysql_error()); // Print out the contents of each row into a table while ($row2 = mysql_fetch_array($result2)) { extract($row2); ?> <li id="page_<?= $page_id ?>"><?= $page_name ?></li> <?php } ?> </ul> </li> <?php } ?> </ul> <script type="text/javascript"> function updateOrder() { var options = { method : 'post', parameters : Sortable.serialize('movies_list') }; new Ajax.Request('processor.php', options); } Sortable.create('movies_list', { onUpdate : updateOrder }); </script> <script type="text/javascript"> function updateOrder() { var options = { method : 'post', parameters : Sortable.serialize('page_list') }; new Ajax.Request('processor.php', options); } Sortable.create('page_list', { onUpdate : updateOrder }); </script> </body> </html> I hope someone can explain to me how to do the drag and drop effect for the pages across the categories and at the same time being able to sort the categories. Or if anyone knows of a tutorial that would be great! Thanks in advance! Link to comment https://forums.phpfreaks.com/topic/147734-need-help-with-drag-and-drop/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.