jquery Drag layout implement sort results Sync database

Source: Internet
Author: User
Tags implement join connect query sort client jquery library

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.

51CTO recommendation: jquery from getting started to mastering the jquery Power plugin Grand Parade

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

Use the jquery UI sorttable drag sort plug-in to implement the 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

 
  
  
  1. <div id= "Loader" ></div>
  2. <div id= "Module_list" >
  3. <input type= "hidden" id= "OrderList"/>
  4. <div class= "Modules" title= "1" >
  5. <p>1</p>
  6. </div>
  7. ...
  8. </div>

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

 
  
  
  1. #module_list {margin-left:4px}
  2. Modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9;
  3. Background: #e8f5fe}
  4. . m_title{height:24px line-height:24px; background: #afc6e9}
  5. #loader {height:24px; Text-align:center}

Simple, the key is to give. Modules a style that wants to float left float:left.

Jquery

 
 
  1. $ (function () {
  2. $ (". M_title"). Bind ("MouseOver", function () {
  3. $ (this). CSS ("cursor", "move")
  4. });
  5. var $show = $ ("#loader");
  6. var $orderlist = $ ("#orderlist");
  7. var $list = $ ("#module_list");
  8. $list. Sortable ({
  9. opacity:0.6,//Set the transparency when dragging
  10. Revert:true,//Buffering effect
  11. Cursor: "Move",//drag when mouse style
  12. Handle: ". M_title",//Can be dragged by the part of the module's title section
  13. Update:function () {
  14. var new_order = [];
  15. $list. Children (". Modules"). each (function () {
  16. New_order.push (This.title);
  17. });
  18. var newid = New_order.join (",");
  19. var oldid = $orderlist. val ();
  20. $.ajax ({
  21. Type: "Post",
  22. URL: "update.php",//server-side handlers
  23. Data: {id:newid, Order:oldid},//id: New arrangement corresponding to Id,order: original order
  24. Beforesend:function () {
  25. $show. HTML (" Updating");
  26. },
  27. Success:function (msg) {
  28. Alert (msg);
  29. $show. HTML ("");
  30. }
  31. });
  32. }
  33. });
  34. });

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 http://jqueryui.com/demos/sortable

Drag completion to execute an update method that needs to be submitted by Ajax to the background after dragging the sorted position.

 
  
  
  1. var new_order = [];
  2. $list. Children (". Modules"). each (function () {
  3. New_order.push (This.title);
  4. });
  5. var newid = New_order.join (",");
  6. 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.

 
 
  1. Include_once ("connect.php");//Connection database
  2. $order = $_post["Order"];
  3. $itemid = Trim ($_post["id"]);
  4. if (!empty ($itemid)) {
  5. if ($order!= $itemid) {
  6. $query = mysql_query ("Update sortlist set sort=" $itemid "where id=1");
  7. if ($query) {
  8. Echo $itemid;
  9. } else {
  10. echo "None";
  11. }
  12. }
  13. }

Home index.php back to show the 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.

 
  
  
  1. <script type= "Text/javascript" src= "Js/jquery.js" ></script>
  2. <script type= "Text/javascript" src= "Js/jquery-ui.min.js" ></script>

Reads the value of the sorted field for the database.

 
  
  
  1. Include_once ("connect.php");
  2. $query =mysql_query ("select * from Sortlist where id=1");
  3. if ($rs =mysql_fetch_array ($query)) {
  4. $sort = $rs ["Sort"];
  5. }
  6. $sort _arr=explode (",", $sort);
  7. $len =count ($sort _arr);

Loop through the modules.

 
 
  1. <div id= "Loader" ></div>
  2. <div id= "Module_list" >
  3. <input type= "hidden" id= orderlist "value=" <?php echo $sort;? > "/>
  4. <?php
  5. for ($i =0; $i < $len; $i + +) {
  6. ?>
  7. <div class= "Modules" title= "<?php echo $sort _arr[$i];?>" >
  8. <p><?php echo $sort _arr[$i];?></p>
  9. </div>
  10. <?php}?>
  11. </div>

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

Original link: http://www.helloweba.com/view-blog-72.html



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.