jquery implements a way to drag and drop page elements and save them to a cookie _jquery

This article describes the jquery implementation method of dragging page elements and saving them to cookies. Share to everyone for your reference, specific as follows:

The effect is that the picture inside the page can be dragged anywhere, and the location will be saved. The next open page is still visible. This paper is for demo use, the actual development, the location of the data should be saved to the database

All right, here we go.

1. Preparatory work

A.jquery (1.7.2), Ui,cookie plugin, JSON plugin. Some pictures (this is 5 pieces)

2. Page

On the Code

<div class= "img_list" id= "img_list" > <div id= "Baidu" ></div>
<div id= "google" ></div>
<div id= "csdn" ></div> <div id= "Fly"
></div> <div id= "163" ></div>
</div>

Next, increase the draggable for each IMG parent element and dynamically change the ID so that it is easier to record and reduce the workload. Of course, first you have to give it 2 events, Mouseenter,mouseleave. The code is as follows

$ ("#img_list div"). On ({
mouseenter:function () {
      $ (this). addclass (' Img_move ');
      _t_id =$ (this). attr (' id ');//Save original ID
      $ (' Div.img_move '). attr (' id ', ' img_move ');
},
mouseleave:function ( ) {
       $ (' #img_move '). Removeclass (' Img_move '). attr (' id ', _t_id);
      _t_id = ';/empty, Temporary save ID
    }
};

So far, we've implemented the dynamic load ID, and here's the emphasis here, so div can drag

Just add this sentence to the MouseEnter event so that when the mouse enters a Div, the div becomes a drag.

$ ("#img_move"). Draggable ();

3. Save after dragging and dragging

If you refresh the page, you will find that the image you just dragged will revert to the original position. This must not be true, so the preservation becomes a must. The actual development must be saved to the database, because, if the customer empty the cookie effect all have no ... 360 of Pit fathers do this.

Here, in addition to cookies to use the JSON plug-in, so save the time will be convenient and the drag-and-drop elements of the information stored in the same object, easy to read

On the Code

$ ("#img_move"). Draggable ({
   start:function (e,ui) {
   ui.helper.css (' Z-index ', ' 999 ');//The element is not obscured when dragged
   },
   stop:function (e,ui) {
    ui.helper.css (' z-index ', ' 0 ');//drag end to allow element to obscure
    var x = ui.position.left;
    var y = ui.position.top;
    var id = _t_id;
    var temp = {' id ': ID, ' x ': x, ' y ': y};
    var _data = $.tojson (temp);//convert
    to JSON $.cookie (' Img_list_ ' +_t_id,_data,{expires:1});//save information, set valid time
    }
});

PS: The position of the element in the page, simple to say is the value of Left,top decision

4. Load after refresh

Read the information stored in the cookie after window.onload and assign it to the corresponding element

Window.onload = function () {
  fix_img (' Baidu ');
    Fix_img (' Google ');
    Fix_img (' csdn ');
    Fix_img (' Fly ');
    Fix_img (' 163 ');
  };
Fix_img
function fix_img (ID) {
 if (id) {
   var _test_data = $.cookie (' img_list_ ' +id);
   var _id = $.evaljson (_test_data). ID;
   var _x = $.evaljson (_test_data). x;
   var _y = $.evaljson (_test_data). Y;    
     $ (' # ' +_id). CSS (' left ', _x+ ' px '). CSS (' top ', _y+ ' px ');
  }

5. Summary:

①. The idea is to drag and save first. Different ways to implement

②. Actual development must be saved to the database

More interested readers of jquery-related content can view the site topics: "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery table (table) Operation Tips Summary", "jquery drag and drop effects and tips summary", " jquery Extended Skills Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.