jquery Drag layout implement sort results Sync database

Many of the site's drag layout examples are the use of browser cookies to record the location of the user to drag the module, that is, after dragging the various modules of the sort location information is recorded in the client's cookie. When the user empties the client's cookie or the browser's cookie expires and accesses the page again, it discovers that the layout is restored to its original state. This cookie recording method is simple to use, but is not suitable for requirements like the Personal center, the management System homepage.

51CTO recommendation: jquery from getting started to mastering the jquery Power plugin Grand Parade

This example implements the effect:

Drag to layout the page module randomly.

Record the location of the dragged module and record it in the database.

Page permanent layout, with any browser open at any time, the page layout is unchanged. (unless the user changes the order of the module again, it has nothing to do with the cookie).

Principle

Use the jquery UI sorttable drag sort plug-in to implement the drag effect.

The location of the dragged module is passed through Ajax to the server-side PHP program.

After the PHP program processes location information, update the corresponding field contents in the database.

Xhtml

 
  
  

  
   
   
<div id= "Loader" ></div>
  
   
   
<div id= "Module_list" >
  
   
   
<input type= "hidden" id= "OrderList"/>
  
   
   
<div class= "Modules" title= "1" >
  
   
   
 
   
<p>1</p>
  
   
   
</div>
  
   
   
...
  
   
   
</div>
 
  
  

Div#loader is used to display prompt information, such as loading ..., #orderlist是一个隐藏域, to record the sorting value of the module. "..." is a loop of n Div.modules, and the code generated is described later.

Css

 
  
  

  
   
   
#module_list {margin-left:4px}
  
   
   
Modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;
  
   
   
Background: #e8f5fe}
  
   
   
. m_title{height:24px line-height:24px; background: #afc6e9}
  
   
   
#loader {height:24px; Text-align:center}
 
  
  

Simple, the key is to give. Modules a style that wants to float left float:left.

Jquery

 
 

  
  

  
$ (function () {
  
  

  
$ (". M_title"). Bind ("MouseOver", function () {
  
  

  
$ (this). CSS ("cursor", "move")
  
  

  
});
  
  

  

  
  

  
var $show = $ ("#loader");
  
  

  
var $orderlist = $ ("#orderlist");
  
  

  
var $list = $ ("#module_list");
  
  

  

  
  

  
$list. Sortable ({
  
  

  
opacity:0.6,//Set the transparency when dragging
  
  

  
Revert:true,//Buffering effect
  
  

  
Cursor: "Move",//drag when mouse style
  
  

  
Handle: ". M_title",//Can be dragged by the part of the module's title section
  
  

  
Update:function () {
  
  

  
var new_order = [];
  
  

  
$list. Children (". Modules"). each (function () {
  
  

  
New_order.push (This.title);
  
  

  
});
  
  

  
var newid = New_order.join (",");
  
  

  
var oldid = $orderlist. val ();
  
  

  
$.ajax ({
  
  

  
Type: "Post",
  
  

  
URL: "update.php",//server-side handlers
  
  

  
Data: {id:newid, Order:oldid},//id: New arrangement corresponding to Id,order: original order
  
  

  
Beforesend:function () {
  
  

  
$show. HTML (" Updating");
  
  

  
},
  
  

  
Success:function (msg) {
  
  

  
Alert (msg);
  
  

  
$show. HTML ("");
  
  

  
}
  
  

  
});
  
  

  
}
  
  

  
});
  
  

  
});
 
 

Drag sort actions are written in $list.sortable ({...}) Inside, parameter settings and methods see code comments. The sortable plug-in for the Juery UI provides a number of methods and parameter configurations, please see http://jqueryui.com/demos/sortable

Drag completion to execute an update method that needs to be submitted by Ajax to the background after dragging the sorted position.

 
  
  

  
   
   
var new_order = [];
  
   
   
$list. Children (". Modules"). each (function () {
  
   
   
New_order.push (This.title);
  
   
   
});
  
   
   
var newid = New_order.join (",");
  
   
   
var oldid = $orderlist. val ();
 
  
  

Description: Cycle each module. Modules, get the property title value of each module after dragging, and concatenate the value by a comma into a string. The sorted value that was previously not dragged is obtained from the hidden field orderlist.

After you get the sort value, you're interacting with a background program with Ajax.

Php

Update.php receive front-end Ajax through the post submitted two parameters, and the sort of value before and after the sorted value, this is compared to the value, if not equal, then update the sorting field in the database, finished dragging the sort of timely save.

 
 

  
  

  
Include_once ("connect.php");//Connection database
  
  

  
$order = $_post["Order"];
  
  

  
$itemid = Trim ($_post["id"]);
  
  

  
if (!empty ($itemid)) {
  
  

  
if ($order!= $itemid) {
  
  

  
$query = mysql_query ("Update sortlist set sort=" $itemid "where id=1");
  
  

  
if ($query) {
  
  

  
Echo $itemid;
  
  

  
} else {
  
  

  
echo "None";
  
  

  
}
  
  

  
}
  
  

  
}
 
 

Home index.php back to show the layout of the home page index.php. Index.php reads the sorting information of the module by connecting the database and displays the modules.

First, don't forget to load the jquery library and the jquery UI sortable drag sort plug-in.

 
  
  

  
   
   
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
  
   
   
<script type= "Text/javascript" src= "Js/jquery-ui.min.js" ></script>
 
  
  

Reads the value of the sorted field for the database.

 
  
  

  
   
   
Include_once ("connect.php");
  
   
   

  
   
   
$query =mysql_query ("select * from Sortlist where id=1");
  
   
   
if ($rs =mysql_fetch_array ($query)) {
  
   
   
$sort = $rs ["Sort"];
  
   
   
}
  
   
   
$sort _arr=explode (",", $sort);
  
   
   
$len =count ($sort _arr);
 
  
  

Loop through the modules.

 
 

  
  

  
<div id= "Loader" ></div>
  
  

  
<div id= "Module_list" >
  
  

  
<input type= "hidden" id= orderlist "value=" <?php echo $sort;? > "/>
  
  

  
<?php
  
  

  
for ($i =0; $i < $len; $i + +) {
  
  

  
?>
  
  

  
<div class= "Modules" title= "<?php echo $sort _arr[$i];?>" >
  
  

  

  
  

  
<p><?php echo $sort _arr[$i];?></p>
  
  

  
</div>
  
  

  
<?php}?>
  
  

  
</div>
 
 

Admittedly, the true drag sorting results are associated with each user information, so the structure of the database design can be solved by yourselves.

Original link: http://www.helloweba.com/view-blog-72.html