Nedenstående skulle give en ide om hvad jeg mener......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery drag and drop</title>
</head>
<body>
<p>In this tutorial we're going to be looking at 2 main PHP pages. the index.php page which contains the contents and functionality to perform the drag and drop and the updateList.php file which is a simple piece of code to update the listOrder column in the database using PHP and MySQL. Additionally you will need to add your database details to the connect.php file in the download package.</p>
<pre>$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</pre>
<p>Here's a summary of whats going on in the code above.</p>
<ol>
<li>To start with we have a simple function that will slide up the ‘response' div which contains the message once the data is saved in the database.</li>
<li>We then move to the section that enables us to drag and drop the boxes. we then set the variable ‘order' which contains the data to be posted via ajax to our database update script.</li>
<li>Once the ajax request has been executed we then display the response in the div #response</li>
</ol>
<p>This is the section in the index.php page that retrieves the results from the database in the correct order.</p>
<pre><div id="list">
<div id="response"> </div>
<ul>
<?php
include("connect.php");
$query = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$text = stripslashes($row['text']);
?>
<li id="arrayorder_<?php echo $id;?>"><?php echo $id;?> <?php echo $text;?>
<div class="clear"></div>
</li>
<?php } ?>
</ul>
</div></pre>
<p>Below is the code from the ‘updateList.php' file. Its pretty self explanatory, we have a MySQL update script wrapped with a foreach loop which adds the list order number in the database and echo's the response. </p>
<pre><?php
include("connect.php");
$array = $_POST['arrayorder'];
if ($_POST['update'] == "update"){
$count = 1;
foreach ($array as $idval) {
$query = "UPDATE dragdrop SET listorder = " . $count . " WHERE id = " . $idval;
mysql_query($query) or die('Error, insert query failed');
$count ++;
}
echo 'All saved! refresh the page to see the changes';
}
?></pre>
<p>And finally the sql for your database structure</p>
<pre>
SET NAMES latin1;
SET FOREIGN_KEY_CHECKS = 0;
CREATE TABLE `dragdrop` (
`id` int(11) NOT NULL auto_increment,
`text` varchar(255) default NULL,
`listorder` int(11) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;
insert into `dragdrop` values('1','Go Shopping','1'),
('2','Take the dog for a walk','2'),
('3','Go swimming','3'),
('4','Go to the Gym','4'),
('5','Pick up the wife from work','5'),
('6','Wash the car','6'),
('7','Take the kids to school','7');
SET FOREIGN_KEY_CHECKS = 1;
</pre>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
