本文實例講述了jQuery實現拖拽頁面元素并將其保存到cookie的方法。分享給大家供大家參考，具體如下：
實現的效果就是頁面內的圖片可拖拽到任意位置,并將所在位置保存.下次打開頁面依然可見.本文是作demo用,實際開發中,位置的數據應保存到數據庫中
好了,開始
1.準備工作
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,并且動態改變id,這樣便于記錄時減少工作量.當然,先得給它來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 }});到目前為止,我們已實現動態加載id,下面重點來了,讓div可拖拽
只要在mouseenter事件中加上這句就行,這樣當鼠標進入某塊div時,div就變成可拖拽的了
$( "#img_move").draggable();
3.拖拽后的保存
如果,你刷新頁面會發現,剛拖拽的圖片,會恢復到初始位置.這個肯定不行,于是,保存就成了必須.實際開發一定要保存到數據庫,因為,客戶要是清空了cookie效果全部沒有了...坑爹的360常干這事
這里除了cookie還要用到json插件,這樣保存的時候會方便并且把拖拽后元素的信息儲備到同一個對象中,便于讀取
上代碼
$( "#img_move").draggable({ start:function(e,ui){ ui.helper.css('z-index','999'); //拖動時元素一直是不被遮蔽 }, stop:function(e,ui){ ui.helper.css('z-index','0'); //拖動結束,讓元素可遮蔽 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);//轉成json $.cookie('img_list_'+_t_id,_data,{expires:1}); //保存信息,設置有效時間 }});ps:元素在頁面中的位置,簡單的說是left,top的值決定的
4.刷新后載入
window.onload后把cookie保存的信息讀出來,并賦到對應元素上
window.onload = function(){ fix_img('baidu'); fix_img('google'); fix_img('csdn'); fix_img('fly'); fix_img('163'); };//fix_imgfunction 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.總結：
①.思路是先拖后保存.實現方式各有不同
②.實際開發一定要保存到數據庫
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
