DEVELOPMENT
sorting element

THE SITUATION

Here, I've created a situation where the user is asked to arrange a list of words in an alphabetical order. If he/she is able to arrange the words in correct order a "WELL DONE" message is displayed.

THE DATABASE

db sorting

The detail of coloumns are -
INDEX.PHP
<!DOCTYPE html>
<html> 
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script>
 $(function() {
 $( "#sort" ).sortable({ 
 opacity: 0.8, 
 cursor: 'move', 
 update: function()
 {
 
 var ele = $(this).sortable("serialize");
 $.post("updtab.php",ele,function(data,status){ 
 
 if(data == 1)
 {
 alert("WEll DONE !!!");
 }
 });
 
 }
 });
 });
</script>
</head>
<body>

<p>Arrange the following words in alphabetical order.(Dragging and dropping is enable)</p>

<?php

$conn=@mysql_connect("localhost","root","") or die("could not connect to database");
$db=@mysql_select_db("blog",$conn) or die("could not select database");
$result = mysql_query("SELECT * FROM dytab ORDER BY `order` ASC");
$num=mysql_numrows($result);
echo "<ul class=\"outside\" id='sort'>";
$i=0;
while($i<$num)
{
echo "<li class=\"inside\" id='id_".mysql_result($result,$i,"c_order")."'>";
 echo mysql_result($result,$i,"tit");
 echo "</li>";
 $i++;
}
echo "</li>";
?>

</body>
</html>

CHCK.PHP
<?php
$arr=$_POST['id']; 
$count=0;$s="";
foreach ($arr as $id) {
 
 $s=$s.$id; 
 $count ++;
}
if($s=="123456")
 echo 1;
?>

STYLE.CSS
p
{
    font-family: Arial;
    color: #333333;
    font-weight: bold;
}
.inside
{
    height: 20px;
    width: 150px;
    background: #333;
    border:2px solid white;
    color: white;
    cursor:move; 
    border-radius:5px;    
    text-align: center; 
    list-style: none;
    padding: 2px;
}



Leave a Comment  
Download Code(51)





All rights reserved, the content is copyrighted to the author.

RELATED POST