The recent project involved the need for users to personalize the homepage,User requirements can drag the position of the homepage module at will,To achieve a personalized layout.This article explains how to use and PHP to implement drag layout and save the layout position after dragging to the database.

Many examples of drag layouts for websites use browser cookies to record the position of the user's drag module.In other words, the sorted position information of each module after dragging is recorded in the client's cookie. When the user clears the client's cookie or the browser's cookie expires, and then visits the page again,It was found that the layout was restored to its original state.This cookie recording method is simple to use,But it is not suitable for requirements like personal center, management system homepage.

The effect achieved by this example:

Freely layout page modules by dragging.

Record the position of the module after dragging,And recorded in the database.

Permanent layout of the page,Open it at any time with any browser,The page layout is unchanged.(Unless the user changes the order of the modules again,Has nothing to do with cookies).


The drag sorting plug-in is used to achieve the drag effect.

Pass the position of the dragged module to the server php program via ajax.

After the php program processes the location information,Update the corresponding field content in the database.


  <input type="hidden" />

div #loader is used to display prompt information,Like loading ..., #orderlist is a hidden field,Used to record the sort value of the module."..." indicates that n div.modules have been looped. The specific generated code will be described later.


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

Simple, the key is to give.modules A float:left style that wants to float left.


$(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, //buffer effect
    cursor:"move", //Mouse style when dragging
    handle:".m_title", //Possible to drag,Title of module
    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 handler
        data:{id:newid, order:oldid}, //id:the id corresponding to the new permutation, order:the original permutation order
        beforesend:function () {
           $show.html ("<img src =" load.gif "/>Updating");
        },        success:function (msg) {
           //alert (msg);
           $show.html ("");

Drag and drop actions are written in $list.sortable ({...}). For parameter settings and methods, see the comments in the code.The sortable plugin of juery ui provides many methods and parameter configurations.See details

After the drag is completed, an update method is executed. This method needs to submit the sorted position after dragging to the background processing through Ajax.

var new_order=[];
$list.children (". modules"). each (function () {
   new_order.push (this.title);
var newid=new_order.join (",");
var oldid=$orderlist.val ();

Description:Cycle through each module.modules, get the title value of each module after dragging and sorting, and concatenate the values ​​into a string through a comma.The original sort value before dragging is obtained from the hidden field orderlist.

After getting the sorted value,It is through ajax to interact with the background program.


update.php receives the two parameters submitted by the front-end ajax via post,And the sorted value and sorted value,Compare these consecutive values,If not equal,Then update the sort field in the database,Save after finishing drag sort.

include_once ("connect.php");//Connect to the database
$order=$_post ["order"];
$itemid=trim ($_ post ["id"]);
if (! emptyempty ($itemid)) {
  if ($order!=$itemid) {
    $query=mysql_query ("update sortlist set sort =" $itemid "where id=1");
    if ($query) {
      echo $itemid;
    } else {
      echo "none";


Go back to index.php, the home page that shows the layout. index.php reads the sorting information of the module by connecting to the database,And display each module.

First of all, don't forget to load the jquery library and the sortable drag sort plugin of jquery ui.

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

Read the sort field value of 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);

Cycle through the modules.

 <input type="hidden" value="?php echo $sort;?>" />
   for ($i=0;$i<$len;$i ++) {
   <h3>module:<?php echo $sort_arr [$i];?</h3>
   <p><?php echo $sort_arr [$i];?></p>

It is true that the storage of the actual drag sort results is associated with each user's information.So we can solve the database structure design by ourselves.Enjoy yourself.

  • Previous jQuery + Ajax + PHP "Like" rating function implementation code
  • Next Analysis of installing wetty and instructions for use under Linux