jquery implements drag layouts and saves sorting results to the database

Many Web site Drag layout Examples are the use of browser cookies to record the location of the user drag module, that is, after the drag of the module's sorting location information is recorded in the client's cookie. When the user clears the client's cookie or the browser's cookie expires, the page is again visited and the layout is restored to its original state. This cookie is recorded in a way that is simple to use, but is not suitable for requests like personal Center, Management system home page.

This example achieves the effect:

• Drag the Free Layout page module by dragging.
• Records the location of the dragged module and logs it to the database.
• Page permanent layout, with any browser at any time to open, the page layout is unchanged. (The cookie does not matter unless the user changes the order of the modules again).

Principle

Drag the sort plug-in with the jquery UI for SortTable.

Pass the position of the dragged module through Ajax to the server-side PHP program.

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

Xhtml

<divId="Loader"></div>
<divId="Module_list">
<inputType="Hidden"Id="OrderList"/>&NBSP; 
    <div < Span class= "Html__attr_name" >class= "modules"   Title= "1" >&NBSP; 
        class=  "M_title" >module:1        <p>1</P>&NBSP; 
        ...  
 </DIV>&NBSP; 
  

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

Css

#module_list {Margin-left:4PX}
. modules{FloatLeftWidth200px;height:140px; margin:< Span class= "Css__number" >10px; border:1px solid  #acc6e9;   
   #e8f5fe}  
 .m_title{ height:24px;  Line-height:24px; background:  #afc6e9}  
  #loader {height:< Span class= "Css__number" >24px; text-align:center} &NBSP 
                

Simple, the key is to give. Modules a style that wants to float to the 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 ({
Opacity0.6,Set the transparency when dragging
Revert:true,Cushioning effect
Cursor' Move ',The mouse style when dragging
Handle'. M_title ',The parts that can be dragged, the title part of the module
Updatefunction (){
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",Service-Side handlers
Data{Id:newid, Order:oldid},ID: The new arrangement corresponds to the Id,order: the original sort order
Beforesend:function (){
$show. HTML (" is being updated");
},
Successfunction (msg)  {  
                       //alert (msg);   
                        $show. html (                 < Span class= "Js__brace" >}&NBSP; 
                         }&NBSP; 
               

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

Drag completion to execute an Update method that requires the position of the dragged post to be submitted to background processing via 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 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 before the original is not dragged is obtained from the hidden field orderlist.

After getting the sort value, it is through Ajax and background program interaction.

Php

update.php receive front-end Ajax through post submitted by the two parameters, and the pre-sorting values and sorted values, the value of the comparison, if not equal, update the database in the sorting field, completed the drag sort after the timely save.

Include_once ("connect.php");Connecting to a 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 $< Span class= "php__variable" >ITEMID;&NBSP; 
         } ELSE&NBSP;{&NBSP; 
             < Span class= "Php__keyword" >echo  "none";   
          }  
     }  
}  
      

Home index.php

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

First of all, don't forget to load the jquery library and the jquery UI's 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 sorted field values 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);

Cycle through each module.

 
<divId="Loader"></div>
<divId="Module_list">
<inputType="Hidden"Id="OrderList"Value="<?phpEcho$Sort?> "/>
<?php
For$I=0;$i<$Len$i++) {
?>
 <divclass="Modules"title="<?phpEcho$sort_arr[$I];?> ">
class="M_title">module:<?phpecho $sort_arr[$i]; ?> </H3>&NBSP; 
        <p><?php < Span class= "Php__keyword" >echo $sort_arr[$i]; ?> </p>  
   </DIV>&NBSP; 
    <?php } ?>&NBSP; 
 </DIV>&NBSP;           

jquery implements drag layouts and saves sorting results to the database