用Jquery实现拖拽层

第一:
我们需要加入 Jquery.js 的库文件,还有 Jquery UI 核心文件:ui.core.js,最后一个就是 UI 拖动层文
件:ui.sortable.js.以及一些 UI 样式.
代码如下 :

<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

第二: 接下来写我们拖动层的 JS 函数功能.主要的函数(sortable)如下(注:我这里只基本功能):

$(function() {
$(".column").sortable({
connectWith: '.column',//要拖动层的列
opacity: 0.4,//模糊效果值
revert: true,
stop:saveLayout//拖动完成后,回调函数.这里就可以通过 AJAX 把层的顺序保存在数据库里面
});
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content").addClass("movehand");

$(".portlet-header .ui-icon").click(function(){
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
}

关于 sortable 这个函数所有值代表的意思,我也不在这里多介绍了..因为比较多..不是太好多介绍..朋
友们可以参考 jquery 的 UI API 介绍..在那里介绍的很详细..不过是 E 文.但都很
简单.慢慢看吧..呵呵....

第三:写一些乱七八糟的功能,比如上下排序层,删除层和拖动前或拖动完成后等等一些回调函数.

//保存模块排序并写入 Cookie (^_^我这里只有 COOKIE 保存.当然你可以保存在数据库里面)

//保存模块排序并写入 Cookie (^_^我这里只有 COOKIE 保存.当然你可以保存在数据库里面)
function saveLayout(){
$.cookie('my_self_panle',getVales());

changeIcon();
}
//每一列模块的值,其实 sortable 这个函数里有一个 serialize 可以直接取到对应的序列值:格式如下:
// $('#left').sortable('serialize',{key:'leftmod[]'}) + '&' + $
('#right').sortable('serialize',{key:'rightmod[]'})
//我这里就没有用这个东西
function getVales()
{
var vales='';
var Tstring=new Array();
var areas=new Array('left','center','right');
$.each(areas, function(i, vals){
$('#'+vals+'>.portlet').each(function(j){
vales=vales+'&'+this.id;
});
Tstring[i]=vales;
vales=''
});
return Tstring;
}

//这里只是改变上下排序的图标.
function changeIcon()
{
var areas=new Array('left','center','right');
$.each(areas, function(i, vals){
$('#'+vals).find(".portlet-header >span").show();
$('#'+vals+' div:first-child').find(".portlet-header >span:nth-
child(4)").hide();
$('#'+vals+' div:last-child').find(".portlet-header >span:nth-
child(3)").hide();
});
}

//把一个层向上.这个函数写的不算好..我总认为有更好的方法.比如用:clone 方法.
//有好的方法的朋友可以指导一下我.
function up(obj)
{
var this_obj=$(obj).closest("div");
var prev_html = this_obj.prev().html();
var this_html = this_obj.html();
var prev_id = this_obj.prev().attr("id");
var this_id = this_obj.attr("id");

this_obj.prev().html(this_html);
this_obj.prev().attr('id',this_id);
this_obj.html(prev_html);
this_obj.attr('id',prev_id);
saveLayout();//排序后.我们也要保存层
}
//同上面.只是这个是让一个层向下
function down(obj)
{
var this_obj=$(obj).closest("div");
var next_html = this_obj.next().html();
var this_html = this_obj.html();
var next_id = this_obj.next().attr("id");
var this_id = this_obj.attr("id");
this_obj.next().html(this_html);
this_obj.next().attr('id',this_id);
this_obj.html(next_html);
this_obj.attr('id',next_id);
saveLayout();
}

//一个简单的,删除一个层
function del(obj)
{
var this_box=$(obj).closest("div").remove();
saveLayout();
}

最后.要说的,就是这个功能完结了...目前公司开发里,只用了一小部分这个功能...不过我自己的一个项
目中...嘿嘿...用了这个功能.
用户可以自己排列自己的网站页面与功能...过些时日...有空的话..我把我的系统再完整一下...有机会
朋友可以测试玩一下...帮我
找找问题...这也是进步~~~~

总结:一个小的教程可能对朋友们只能算是一块小的砖头...不知道能不能引出几块好的玉来...希望有更
多的朋友加入分享自己成果的行列中....其实这样到最后,收获
最大的还是自己....这也是我为什么在很累的时候都希望自己有时间可以写一些自己所得到的东西...我
不期待什么好的回报...只是
期待更多朋友可以自己去学习,发现..再分享~~~~~

其实在前年的这个时候，我就有用过这个 sortable 组件，那时候搞了个个人网站（可惜后来关了），首
页就用到了这种拖拽的效果。当时也就从 jquery 的官方网站上抄了几句搞上去，后来发现用处不大，还挺
慢。汗～～～以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来，正好现在公司要做一个
这样的功能，就又从新学习了下。

首先，在 jquery 的官方 demo(http://jqueryui.com/demos/)上找到了相似的代码。我所要的叫就是
portlets（http://jqueryui.com/demos/sortable/portlets.html）这种效果。就像 igoogle 首页那样的。
冒似很简单，把要引用的 js 都加入后，然后几行代码就完事了。

<script type="text/javascript">
$(function() {
connectWith: '.column'
});
});
</script>

html 代码省略...详情请查看 http://www.lovewebgames.com/demo/sortable 或
http://jqueryui.com/demos/sortable/portlets.html

写完这些之后，你就可以试着拖拽了。有没有觉得很有成就感？不错，小伙子，有前途。sortable 有许多
的参数，详细的自己去官网上看吧！只说下这里的 connectWith:'.column'是什么意思，它就是说，凡是
class 为 column 的，它都可以把一个 column 的 portlet 拖到另一个 column 里去。试试你就知道了。当然今
天的重点并不是怎么样去拖拽它，而是拖拽之后刷新还保存着当时的顺序。

遇到点小困难了，不过那也得上啊，不然以后都被女孩子肯嫁给你！^_^ 于是乎我就开始 google 百度了。
有人说用 sortable 的 serialize 方法可以得到一个 ID 数组，可惜，我确实没有得到。如果你做到了也请
你 tell me 一下;还有人说用 toArray 方法也可以得到 ID 数组.这次也确实得到了。不过非常令人讨厌的
事发生了。

$('.column').sortable('toArray');

这样也只能得到第一个 class 是 column 里的 ID 数组.用 each()? I tried, but not work;可能你能做到，
也请你告诉我吧！所以只能转走其他方法了。或许你会说，这还不简单么，直接把整个网页的布局存起来
不就 OK 了？哈哈，I also think so！通过 iedeveloper 调试工具发现，它们拖动之后发现了改变，变的
不是样式，而是 div 的先后顺序。如果我把整个内容保存起来的话，似乎也行得通，不过量就有点大了，
也不适于动态的内容。怎么办呢，于是我就想着只存它们的 ID 顺序不就 O 了吗?于是我又给它们每人一个
ID 了。

万事开头难，有了这个思路了之后，你是否已经厕所打开了呢？我先去下便下，谢谢开门，马上回来！

接下来就一步步按照这个思路来吧。首先是获取到所有的 column.

$.each($(".column"), function(m) {}

再找每个 column 下的 portlet;

$.each($(".column"), function(m) {
$.each($(this).children(".portlet"), function(d) {
}

接着就是把它们按自己的方式存起来。

function saveLayout(){
var list = "";
$.each($(".column"), function(m) {
list += $(this).attr('id') + ":";
$.each($(this).children(".portlet"), function(d) {
list += $(this).attr('id') + "@";
})
list += "|";
})
$.cookie("list", list)}
这里还用到了另一组件 jquery.cookie

改下开始的

connectWith: '.column',
stop: saveLayout
});
stop 是指拖拽结束后触发的事件.

最后就是按顺序读到容器里去，这里我就不多说了，只可意会，不能言传哈。贴代码吧:

var list = $.cookie("list"); //获取 cookie 里的 list 值
//alert(list)

用Jquery实现拖拽层

More Related Content

What's hot (19)

Viewers also liked (7)

More from yiditushe (20)

用Jquery实现拖拽层