jQuery實(shí)現(xiàn)拖拽頁面元素并將其保存到cookie的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)拖拽頁面元素并將其保存到cookie的方法。分享給大家供大家參考,具體如下:
實(shí)現(xiàn)的效果就是頁面內(nèi)的圖片可拖拽到任意位置,并將所在位置保存.下次打開頁面依然可見.本文是作demo用,實(shí)際開發(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>
接下,先為每個(gè)img的父元素增加draggable,并且動(dòng)態(tài)改變id,這樣便于記錄時(shí)減少工作量.當(dāng)然,先得給它來2個(gè)事件,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 = '';//清空,臨時(shí)保存id } });
到目前為止,我們已實(shí)現(xiàn)動(dòng)態(tài)加載id,下面重點(diǎn)來了,讓div可拖拽
只要在mouseenter事件中加上這句就行,這樣當(dāng)鼠標(biāo)進(jìn)入某塊div時(shí),div就變成可拖拽的了
$( "#img_move").draggable();
3.拖拽后的保存
如果,你刷新頁面會(huì)發(fā)現(xiàn),剛拖拽的圖片,會(huì)恢復(fù)到初始位置.這個(gè)肯定不行,于是,保存就成了必須.實(shí)際開發(fā)一定要保存到數(shù)據(jù)庫,因?yàn)?客戶要是清空了cookie效果全部沒有了...坑爹的360常干這事
這里除了cookie還要用到j(luò)son插件,這樣保存的時(shí)候會(huì)方便并且把拖拽后元素的信息儲(chǔ)備到同一個(gè)對(duì)象中,便于讀取
上代碼
$( "#img_move").draggable({ start:function(e,ui){ ui.helper.css('z-index','999'); //拖動(dòng)時(shí)元素一直是不被遮蔽 }, stop:function(e,ui){ ui.helper.css('z-index','0'); //拖動(dòng)結(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è)置有效時(shí)間 } });
ps:元素在頁面中的位置,簡(jiǎn)單的說是left,top的值決定的
4.刷新后載入
window.onload后把cookie保存的信息讀出來,并賦到對(duì)應(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é):
①.思路是先拖后保存.實(shí)現(xiàn)方式各有不同
②.實(shí)際開發(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動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作
- 分享jQuery網(wǎng)頁元素拖拽插件
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
- jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法
- jQuery實(shí)現(xiàn)html元素拖拽
- jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
- jQuery 版元素拖拽原型代碼
- jQuery實(shí)現(xiàn)容器間的元素拖拽功能
相關(guān)文章
從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對(duì)其進(jìn)行操作. 本章首先講解如何動(dòng)態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選,怎么才能讓他變成單選,效果跟radio一樣呢,本菜鳥就自己寫了個(gè)小程序,代碼很簡(jiǎn)單2014-06-06jQuery 判斷是否包含在數(shù)組中Array[]的方法
下面小編就為大家?guī)硪黄猨Query 判斷是否包含在數(shù)組中Array[]的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格使用說明,需要的朋友可以參考下。2011-11-11JQuery中attr方法和removeAttr方法用法實(shí)例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實(shí)例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jquery實(shí)現(xiàn)的超出屏幕時(shí)把固定層變?yōu)槎ㄎ粚拥拇a
相信很多人都上過taobao吧,在taobao的產(chǎn)品列表頁有一個(gè)浮動(dòng)的用來排序的浮動(dòng)層,當(dāng)你拖動(dòng)滾動(dòng)條而導(dǎo)致那個(gè)排序欄看不到的時(shí)候它會(huì)自動(dòng)變?yōu)楦?dòng)層,一直固定在那里。2010-02-02實(shí)現(xiàn)placeholder效果的方案匯總
由于placeholder是html5的新屬性,可想而知,僅支持html5的瀏覽器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。2015-06-06