jQuery實現(xiàn)拖拽頁面元素并將其保存到cookie的方法

更新時間：2016年06月12日 11:56:55 作者：鄭文亮

這篇文章主要介紹了jQuery實現(xiàn)拖拽頁面元素并將其保存到cookie的方法,涉及jQuery基于cookie針對頁面元素屬性的相關(guān)保存操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)拖拽頁面元素并將其保存到cookie的方法。分享給大家供大家參考，具體如下：

實現(xiàn)的效果就是頁面內(nèi)的圖片可拖拽到任意位置,并將所在位置保存.下次打開頁面依然可見.本文是作demo用,實際開發(fā)中,位置的數(shù)據(jù)應(yīng)保存到數(shù)據(jù)庫中

好了,開始

1.準(zhǔn)備工作

a.jquery(1.7.2),ui,cookie插件,json插件.一些圖片(本文是5張)

2.頁面

上代碼

<div class="img_list" id="img_list">
<div id="baidu"><img src="img/baidu.jpg" id="www.baidu.com"></div>
<div id="google"><img src="img/google.png" id="www.google.com"></div>
<div id="csdn"><img src="img/csdn.jpg" id="www.csdn.net"></div>
<div id="fly"><img src="img/fly.jpg" id="www.jfbcb.com"></div>
<div id="163"><img src="img/163.jpg" id="www.163.com"></div>
</div>

接下,先為每個img的父元素增加draggable,并且動態(tài)改變id,這樣便于記錄時減少工作量.當(dāng)然,先得給它來2個事件,mouseenter,mouseleave.代碼如下

$("#img_list div").on({
mouseenter: function(){
      $(this).addClass('img_move');
      _t_id =$(this).attr('id');//保存原來id
      $('div.img_move').attr('id','img_move');
},
mouseleave: function(){
       $('#img_move').removeClass('img_move').attr('id',_t_id);
      _t_id = '';//清空,臨時保存id
    }
});

到目前為止,我們已實現(xiàn)動態(tài)加載id,下面重點(diǎn)來了,讓div可拖拽

只要在mouseenter事件中加上這句就行,這樣當(dāng)鼠標(biāo)進(jìn)入某塊div時,div就變成可拖拽的了

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

3.拖拽后的保存

如果,你刷新頁面會發(fā)現(xiàn),剛拖拽的圖片,會恢復(fù)到初始位置.這個肯定不行,于是,保存就成了必須.實際開發(fā)一定要保存到數(shù)據(jù)庫,因為,客戶要是清空了cookie效果全部沒有了...坑爹的360常干這事

這里除了cookie還要用到j(luò)son插件,這樣保存的時候會方便并且把拖拽后元素的信息儲備到同一個對象中,便于讀取

上代碼

$( "#img_move").draggable({
   start:function(e,ui){
   ui.helper.css('z-index','999'); //拖動時元素一直是不被遮蔽
   },
   stop:function(e,ui){
    ui.helper.css('z-index','0'); //拖動結(jié)束,讓元素可遮蔽
    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);//轉(zhuǎn)成json
    $.cookie('img_list_'+_t_id,_data,{expires:1}); //保存信息,設(shè)置有效時間
    }
});

ps:元素在頁面中的位置,簡單的說是left,top的值決定的

4.刷新后載入

window.onload后把cookie保存的信息讀出來,并賦到對應(yīng)元素上

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.總結(jié)：

①.思路是先拖后保存.實現(xiàn)方式各有不同

②.實際開發(fā)一定要保存到數(shù)據(jù)庫

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: