jquery page drag location and save to Cookie

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

Okay, 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

code is as follows	copy 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.

The code is as follows	Copy Code
$ ("#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 have implemented the dynamic load ID, the following emphasis comes, so that div can be dragged.

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. Drag-and-drop save.

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 ... Pit Dad's 360 often do this.

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

On the Code

The code is as follows

Copy Code

$ ("#img_move"). Draggable ({ Start:function (E,ui) { Ui.helper.css (' Z-index ', ' 999 '); Elements are not obscured while dragging }, Stop:function (E,ui) { Ui.helper.css (' Z-index ', ' 0 '); Drag ends to allow elements to be obscured 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, simply speaking is the value of the Left,top decision.

4. Load after refresh.

After window.onload, read the information stored in the cookie and assign it to the corresponding element.

The code is as follows

Copy Code

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.

1. The idea is to drag and save first. The way of implementation is different.

2. The actual development must be saved to the database.