First create two tables table_name(fields = 'id','name','sort_order')
and second is table_name(fields = 'id','t_id','name','sort_order').
create db connection in db file:-
in db.php file :-
<?php
mysql_connect("localhost", "root", "") or die ("Error connecting to mysql");
mysql_select_db("db_name");
?>
/*------------------------------------------------------------------------------------------*/
in index.php file :-
<?php
include("db.php");
?>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.connectedSortable{min-height:100px;min-width:400px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 390px; }
.sec h3 {
background: none repeat scroll 0 0 #40E0D0;
font-size: 22px;
height: 47px;
margin-left: 10px;
padding: 0 7px;
width: 372px;
text-align:center
}
.sec {
background-color: #9ACD32;
float: left;
margin-left: 10px;
width: 413px;
}
.trans {
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
</style>
<script>
$(function() {
$( ".connectedSortable" ).sortable({
cursor: "move",
connectWith: ".connectedSortable",
receive: function(event,ui){
console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));
if(ui.sender.attr("id") != this.id)
{
$(ui.item).removeClass("trans");
$.ajax({
type: "POST",
url: "logic.php",
data: { start: ui.sender.attr("id"), drop: this.id , id:$(ui.item).attr("id") }
})/*.done(function( msg ) {
alert( "Data Saved: " + msg );
})*/;
}
} ,
start: function( event, ui ) {
ui.helper.addClass("trans");
},
stop: function( event, ui ) {
$(this).find('li,div').removeClass("trans");
}
}).disableSelection();
$('.connectedSortable , .team_sec ').sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
type: "POST",
url: "order_change.php",
data: {id:$(ui.item).attr("id") , prev:ui.item.prev().attr('id'),team:this.id,data: $(this).sortable('serialize') }
})/*.done(function( msg ) {
alert( "Data Saved: " + msg );
});*/
}
});
});
</script>
</head>
<body>
<div class="team_sec">
<?php
$team_res = mysql_query("select * from team order by sort_order");
while($team = mysql_fetch_assoc($team_res))
{
?>
<div class="sec" id="sec_<?php echo $team['id'];?>">
<h3><?php echo $team['name'];?></h3>
<ul id="<?php echo $team['id'];?>" class="connectedSortable">
<?php
$ids = $team['id'];
$task_res = mysql_query("select * from task where t_id = $ids order by sort_order");
while($task = mysql_fetch_assoc($task_res))
{
?>
<li id="<?php echo $task['id'];?>_<?php echo $team['id'];?>" value="<?php echo $team['id'];?>" class="ui-state-default"><?php echo $task['id'];?>__<?php echo $task['name'];?></li>
<?php
}
?>
</ul></div>
<?php } ?>
</div>
</body>
</html>
/*------------------------------------------------------------------------------------------*/
creat a php file for ajax request like logic.php :-
<?php
include("db.php");
$arid = explode('_',$_POST['id']);
$id = $arid[0];
$tid = $_POST['drop'];
$task_res = mysql_query("update task set t_id = '$tid' where id = $id");
?>
/*------------------------------------------------------------------------------------------*/
creat another php file for second ajax request like order_change.php :-
<?php
include("db.php");
$secid = explode('_',$_POST['id']);
$arr = explode('&',$_POST['data']);
if($secid[0]=="sec")
{
$count = 1;
foreach($arr as $ordr)
{
$ordid = explode('=',$ordr);
$o_id = $ordid[1];
$task_res = mysql_query("update team set sort_order = '$count' where id = $o_id");
$count++;
}
}else
{
$arid = $_POST['team'];
$count = 1;
foreach($arr as $ordr)
{
$ordid = explode('[',$ordr);
$o_id = $ordid[0];
$task_res = mysql_query("update task set sort_order = '$count' where t_id = $arid and id = $o_id");
$count++;
}
}
?>
/*-----------------------------------------end----------------------------------------------*/
create db connection in db file:-
in db.php file :-
<?php
mysql_connect("localhost", "root", "") or die ("Error connecting to mysql");
mysql_select_db("db_name");
?>
/*------------------------------------------------------------------------------------------*/
in index.php file :-
<?php
include("db.php");
?>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
.connectedSortable{min-height:100px;min-width:400px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 390px; }
.sec h3 {
background: none repeat scroll 0 0 #40E0D0;
font-size: 22px;
height: 47px;
margin-left: 10px;
padding: 0 7px;
width: 372px;
text-align:center
}
.sec {
background-color: #9ACD32;
float: left;
margin-left: 10px;
width: 413px;
}
.trans {
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
</style>
<script>
$(function() {
$( ".connectedSortable" ).sortable({
cursor: "move",
connectWith: ".connectedSortable",
receive: function(event,ui){
console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));
if(ui.sender.attr("id") != this.id)
{
$(ui.item).removeClass("trans");
$.ajax({
type: "POST",
url: "logic.php",
data: { start: ui.sender.attr("id"), drop: this.id , id:$(ui.item).attr("id") }
})/*.done(function( msg ) {
alert( "Data Saved: " + msg );
})*/;
}
} ,
start: function( event, ui ) {
ui.helper.addClass("trans");
},
stop: function( event, ui ) {
$(this).find('li,div').removeClass("trans");
}
}).disableSelection();
$('.connectedSortable , .team_sec ').sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
type: "POST",
url: "order_change.php",
data: {id:$(ui.item).attr("id") , prev:ui.item.prev().attr('id'),team:this.id,data: $(this).sortable('serialize') }
})/*.done(function( msg ) {
alert( "Data Saved: " + msg );
});*/
}
});
});
</script>
</head>
<body>
<div class="team_sec">
<?php
$team_res = mysql_query("select * from team order by sort_order");
while($team = mysql_fetch_assoc($team_res))
{
?>
<div class="sec" id="sec_<?php echo $team['id'];?>">
<h3><?php echo $team['name'];?></h3>
<ul id="<?php echo $team['id'];?>" class="connectedSortable">
<?php
$ids = $team['id'];
$task_res = mysql_query("select * from task where t_id = $ids order by sort_order");
while($task = mysql_fetch_assoc($task_res))
{
?>
<li id="<?php echo $task['id'];?>_<?php echo $team['id'];?>" value="<?php echo $team['id'];?>" class="ui-state-default"><?php echo $task['id'];?>__<?php echo $task['name'];?></li>
<?php
}
?>
</ul></div>
<?php } ?>
</div>
</body>
</html>
/*------------------------------------------------------------------------------------------*/
creat a php file for ajax request like logic.php :-
<?php
include("db.php");
$arid = explode('_',$_POST['id']);
$id = $arid[0];
$tid = $_POST['drop'];
$task_res = mysql_query("update task set t_id = '$tid' where id = $id");
?>
/*------------------------------------------------------------------------------------------*/
creat another php file for second ajax request like order_change.php :-
<?php
include("db.php");
$secid = explode('_',$_POST['id']);
$arr = explode('&',$_POST['data']);
if($secid[0]=="sec")
{
$count = 1;
foreach($arr as $ordr)
{
$ordid = explode('=',$ordr);
$o_id = $ordid[1];
$task_res = mysql_query("update team set sort_order = '$count' where id = $o_id");
$count++;
}
}else
{
$arid = $_POST['team'];
$count = 1;
foreach($arr as $ordr)
{
$ordid = explode('[',$ordr);
$o_id = $ordid[0];
$task_res = mysql_query("update task set sort_order = '$count' where t_id = $arid and id = $o_id");
$count++;
}
}
?>
/*-----------------------------------------end----------------------------------------------*/
No comments:
Post a Comment