jQuery實現(xiàn)拖拽頁面元素并將其保存到cookie的方法
本文實例講述了jQuery實現(xiàn)拖拽頁面元素并將其保存到cookie的方法。分享給大家供大家參考,具體如下:
實現(xiàn)的效果就是頁面內(nèi)的圖片可拖拽到任意位置,并將所在位置保存.下次打開頁面依然可見.本文是作demo用,實際開發(fā)中,位置的數(shù)據(jù)應保存到數(shù)據(jù)庫中
好了,開始
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,并且動態(tài)改變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 } });
到目前為止,我們已實現(xiàn)動態(tài)加載id,下面重點來了,讓div可拖拽
只要在mouseenter事件中加上這句就行,這樣當鼠標進入某塊div時,div就變成可拖拽的了
$( "#img_move").draggable();
3.拖拽后的保存
如果,你刷新頁面會發(fā)現(xiàn),剛拖拽的圖片,會恢復到初始位置.這個肯定不行,于是,保存就成了必須.實際開發(fā)一定要保存到數(shù)據(jù)庫,因為,客戶要是清空了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'); //拖動結(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}); //保存信息,設置有效時間 } });
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_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ù)庫
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選,怎么才能讓他變成單選,效果跟radio一樣呢,本菜鳥就自己寫了個小程序,代碼很簡單2014-06-06jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)硪黄猨Query 判斷是否包含在數(shù)組中Array[]的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格使用說明,需要的朋友可以參考下。2011-11-11JQuery中attr方法和removeAttr方法用法實例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實例分析了jQuery中attr方法設置屬性與removeAttr方法移除屬性的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05jquery實現(xiàn)的超出屏幕時把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過taobao吧,在taobao的產(chǎn)品列表頁有一個浮動的用來排序的浮動層,當你拖動滾動條而導致那個排序欄看不到的時候它會自動變?yōu)楦訉?,一直固定在那里?/div> 2010-02-02最新評論