jQuery drag layout and save its results to database_jquery

A recent project involves the user's need to customize the homepage. The user requires that the position of the homepage module can be dragged at will to achieve a personalized layout. This article explains how to use PHP to implement drag layout and save the dragged layout position to the database.

Many examples of drag layouts on websites use the browser's COOKIE to record the position of the user's dragged module. That is to say, the sorting position information of each module after dragging is recorded in the client's cookie. When the user clears the client's cookies or the browser's cookies expire, and then visits the page again, they find that the layout is restored to its original state. This cookie recording method is simple to use, but it is not suitable for requirements such as personal center and management system homepage.
The effect achieved in this example:
Layout page modules as you like by dragging them.
Record the position of the module after dragging and record it in the database.
The page layout is permanent and can be opened at any time with any browser, and the page layout remains unchanged. (Unless the user changes the order of modules again, it has nothing to do with cookies).
Principle
The drag sorting plug-in is used to achieve the drag effect.
Pass the position of the dragged module to the server-side PHP program through ajax.
After the PHP program processes the location information, it updates the corresponding field content in the database.
XHTML

<div id="loader"></div> 
<div id="module_list"> 
  <input type="hidden" id="orderlist" /> 
  <div class="modules" title="1"> 
   <h3 class="m_title">Module:1</h3> 
   <p>1</p> 
  </div> 
  ... 
</div> 

DIV#loader is used to display prompt information, such as loading..., #orderlist is a hidden field used to record the sorting value of the module. "..." means that n DIV.modules are cycled. The specific generated code will be discussed 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 of 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, //设置拖动时候的透明度 
    revert: true, //缓冲效果 
    cursor: 'move', //拖动的时候鼠标样式 
    handle: '.m_title', //可以拖动的部位，模块的标题部分 
    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", //服务端处理程序 
        data: { id: newid, order: oldid },  //id:新的排列对应的ID,order：原排列顺序 
        beforeSend: function() { 
           $show.html("<img src='load.gif' /> 正在更新"); 
        }, 
        success: function(msg) { 
           //alert(msg); 
           $show.html(""); 
        } 
       }); 
    } 
  }); 
}); 

Drag sorting actions are written in $list.sortable({...}). For parameter settings and methods, please see the comments of the code. The sortable plug-in of juery ui provides many methods and parameter configurations. Please check
for details. After dragging is completed, an update method needs to be executed, which 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: Loop through each module.modules, obtain the attribute title value of each module after dragging and sorting, and connect the values ​​into a string through commas. The original sorting value before dragging is obtained from the hidden field orderlist.
After obtaining the sorting value, interact with the background program through ajax.
PHP
update.php receives the two parameters submitted by the front-end ajax through POST, as well as the value before sorting and the value after sorting, and compares the two values. If they are not equal, the sorting field in the database is updated, and the drag is completed. Timely saving after sorting.

include_once("connect.php");//连接数据库 
$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"; 
    } 
  } 
} 

Homepage index.php
Go back to the homepage index.php that displays the layout. index.php reads the sorting information of the modules by connecting to the database and displays each module.
First, don’t forget to load the jquery library and jquery ui’s sortable drag sorting plug-in.

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

Read the sorting 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); 

Display each module in a loop.

<div id="loader"></div> 
<div id="module_list"> 
 <input type="hidden" id="orderlist" value="<&#63;php echo $sort;&#63;>" /> 
 <&#63;php 
   for($i=0;$i<$len;$i++){ 
 &#63;> 
 <div class="modules" title="<&#63;php echo $sort_arr[$i]; &#63;>"> 
   <h3 class="m_title">Module:<&#63;php echo $sort_arr[$i]; &#63;></h3> 
   <p><&#63;php echo $sort_arr[$i]; &#63;></p> 
 </div> 
 <&#63;php } &#63;> 
</div> 

It is true that the storage of real drag sorting results is associated with each user's information, so you can solve the structural design of the database by yourself and use it to your heart's content.

The above is the implementation process of jQuery implementing drag layout and saving the sorting results to the database. I hope it will be helpful to everyone's learning.