JQuery drag layout Save the result to the database, jquery drag

JQuery drag layout Save the result to the database, jquery drag

The recent project involves the user's need to customize the Home Page. Users require that you can drag the Home Page module to achieve personalized layout. This article explains how to use PHP to implement the drag layout and save the layout location after the drag to the database.

In many examples of the drag layout of websites, the COOKIE of the browser is used to record the position of the user's drag module. That is to say, the sorting position information of each module is recorded in the cookie of the client. When the user clears the client cookie or the browser's cookie expires, the page is accessed again and the layout is restored to the original state. This cookie record method is easy to use, but not suitable for requirements such as personal center and Management System homepage.
In this example, the effect is as follows:
Drag to layout the page module at will.
Record the position of the dragged module and record it to the database.
Permanent page layout, which can be opened by any browser at any time without changing the page layout. (Unless the user changes the module sorting again, it has nothing to do with cookies ).
Principle
The drag sorting plug-in is used to achieve the drag effect.
Send the position of the dragged module to the PHP program on the server 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">    

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. "..." Indicates that n DIV. modules are loops. The generated code will be 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 float: left style to float left.
JQuery

$ (Function () {$ (". m_title "). bind ('mouseover', function () {callback (this).css ("cursor", "move")}); var $ show =$ ("# loader "); var $ orderlist = $ ("# orderlist"); var $ list = $ ("# module_list"); $ list. sortable ({opacity: 0.6, // sets the transparency revert: true when dragging, // Buffer Effect cursor: 'move ', // specifies the mouse Style handle:' when dragging :'. m_title', // The part that can be dragged. The module title is updated: 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 processing program data: {id: newid, order: oldid}, // id: ID corresponding to the new arrangement, order: original order beforeSend: function () {response show.html (" updating") ;}, success: function (msg) {// alert (msg ); export show.html ("");}});}});});
The actions of dragging and sorting are all written in $ list. sortable ({...}). For parameter settings and methods, see the code comments. The sortable plug-in of juery ui provides many methods and parameter configurations. For more information, see
After dragging, You need to execute an update method. This method submits the position of the sort after dragging to the background through ajax.

var new_order = []; $list.children(".modules").each(function() {    new_order.push(this.title); }); var newid = new_order.join(','); var oldid = $orderlist.val(); 
Note: loop through each module. modules to obtain the attribute title value of each module after dragging and sorting, and concatenate the value into a string using a comma. The original undragged sorting value is obtained from the orderlist hidden field.
After obtaining the sorting value, ajax interacts with the background program.
PHP
Update. php receives the two parameters submitted by the front-end ajax through POST, and the values before sorting and after sorting, compare these two parameters. If they are not equal, the sort field in the database is updated, and the sort field is saved in time after being dragged.

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 ";}}}
Home index. php
Return to index. php on the homepage that displays the layout. Index. php connects to the database to read the sorting information of the module and displays the modules.
First, do not forget to load the sortable drag sorting plug-in of the jquery library and jquery ui.

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> 
Reads 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); 
Each module is displayed cyclically.

<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]; ?>">    

It is true that the storage of the truly dragged sorting result is related to every user information. Therefore, you can solve the problem on your own in terms of database structure design.
The above is the implementation process of jQuery to achieve the drag layout and save the sorting results to the database. It is helpful for everyone to learn.