实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中.
好了,开始.
1.准备工作.
a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张).
2.页面.
上代码
|
1
2
3
4
5
6
7
|
<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.代码如下.
|
1
2
3
4
5
6
7
8
9
10
11
|
$("#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就变成可拖拽的了.
|
1
|
$( "#img_move").draggable();
|
3.拖拽后的保存.
如果,你刷新页面会发现,刚拖拽的图片,会恢复到初始位置.这个肯定不行,于是,保存就成了必须.实际开发一定要保存到数据库,因为,客户要是清空了cookie效果全部没有了...坑爹的360常干这事.
这里除了cookie还要用到json插件,这样保存的时候会方便并且把拖拽后元素的信息储备到同一个对象中,便于读取.
上代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$( "#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保存的信息读出来,并赋到对应元素上.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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.总结.
1.思路是先拖后保存.实现方式各有不同.
2.实际开发一定要保存到数据库.
3.参考了以下大大的文章.
http://www.zhangxinxu.com/wordpress/
ps:还一些,我记不得,如果是你,让我知道,加你的文章出处.