jquery Drag layout The results are saved to the database _jquery

Recently, the project involves the user personalized customized home page requirements, users can drag the first page of the location of the module, to achieve personalized layout. This article explains how to use and PHP to implement the drag layout and save the dragged layout location to the 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.
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
Drag sort plug-in to implement 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" > 
   
 
 

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 revert:true when dragging,//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 handler data: {Id:newid, Order:oldid},//id: New 
        Arrange the corresponding Id,order: original order beforesend:function () {$show. html (" is 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
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 (!emptyempty ($itemid)) { 
  if ($order!= $itemid) { 
    $query = mysql_query ("Update sortlist set sort= ' $itemid ' whe Re id=1 "); 
    if ($query) { 
      echo $itemid; 
    } else { 
      echo ' none '; 
    } 
  } 
} 

Home index.php
Then return to the display 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 < $len; $i + +) { 
 ?> 
 <div class=" modules "title=" <?php echo $sort _arr[$i];?> "> 
   
 
 

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

This is the jquery implementation of the drag layout and the sorting results saved to the database implementation process, I hope to help you learn.