拖动实现的思路已经更新，为防止大家步入误区，本文建议不用阅读太细，实现思路请参考：http://www.cnblogs.com/hooray/archive/2012/03/23/2414410.html
图标拖动排序
最近加了一个人，给我提了不少意见，也帮了测了一些bug，这次要说的更新就是图标拖动排序的功能。开始我以为实现会很难，当动手开始做的时候，发现也不过如此。下面我就一点点把我的思路告诉大家。
首先，图标拖动和窗口拖动的实现代码是几乎一样的，如果你对这个不清楚，可以看下我之前写的文章《EonerCMS——做一个仿桌面系统的CMS（四）》，关于拖动时的样式效果，我都是以win7做为参考，如图
当我们在拖动一个图标的时候，原图标不动，然后复制出一个与其一样半透明的图标，然后放开鼠标，删除原先的位置，更新到移动后的位置，如图
思路清楚后，就可以动手开始做了，首先是复制一个半透明图标，触发事件是在我鼠标左键mousedown的时候
$(document).on("mousedown","#desk ul li",function(e){$(document.body).append('<li id="shortcut_shadow" style="position:absolute;display:none">'+$(this).html()+'</li>');......});
注意看，当我mousedown的时候，复制出来的半透明图标是不显示的，显示是在当鼠标按住拖动时才显示出来的
$(document).on("mousedown","#desk ul li",function(e){$(document.body).append('<li id="shortcut_shadow" style="position:absolute;display:none">'+$(this).html()+'</li>');var obj = $('#shortcut_shadow');......//增加背景遮罩层_cache.MoveLayOut = GetLayOutBox();var lay = ($.browser.msie) ? _cache.MoveLayOut : $(window);//绑定鼠标移动事件lay.off("mousemove").on("mousemove",function(e){obj.show();});});
当然，只要是拖动的功能，我都会增加一个透明背景遮罩层，避免触发桌面上的一些点击事件或hover效果，拖动的完整代码如下
$(document).on("mousedown","#desk ul li",function(e){$(document.body).append('<li id="shortcut_shadow" style="position:absolute;display:none">'+$(this).html()+'</li>');var obj = $('#shortcut_shadow');var oldobj = $(this);x = e.screenX;//鼠标位于屏幕的lefty = e.screenY;//鼠标位于屏幕的topsT = $(this).offset().top;sL = $(this).offset().left;//增加背景遮罩层_cache.MoveLayOut = GetLayOutBox();var lay = ($.browser.msie) ? _cache.MoveLayOut : $(window);//绑定鼠标移动事件lay.off("mousemove").on("mousemove",function(e){obj.show();_cache.MoveLayOut.show();eX = e.screenX;//鼠标位于屏幕的lefteY = e.screenY;//鼠标位于屏幕的toplessX = eX - x;//距初始位置的偏移量lessY = eY - y;//距初始位置的偏移量_l = sL + lessX;_t = sT + lessY;obj.css({left:_l,top:_t}).attr("left",_l).attr("top",_t);});});
接下来要做的就是，当鼠标抬起的时候，更新图标位置，事件就是mouseup。功能实现的思路是这样，因为我之前写过窗口的resize事件，resize事件会重新对页面上的所有图标更新显示位置，但他是根据图标代码顺序来进行排序的，这个专业名词好像是叫DOM树。也就是我需要做的就是更新图标的dom树，这时页面上是看不出变化的，然后通过resize事件刷新页面上的图标排序，通过2张图来看下就会比较明白了。
这时更新的dom树，但没有调用resize事件，所以虽然代码顺序上是变了，但因为图标是绝对定位，所以页面上是看不出变化的。这时我们在调用下resize事件看看
关于如何计算图标移动到什么位置，就是获得那个半透明图标的当前位置，然后计算出当前位置在图标的dom树里是第几个，然后删除原先图标的节点，添加新节点到最新位置即可，具体可以看下完整实现代码
//绑定鼠标抬起事件lay.off("mouseup").on("mouseup",function(){_cache.MoveLayOut.hide();obj.remove();if($.browser.msie){_cache.MoveLayOut[0].releaseCapture();}$(this).off("mousemove");//移动图标var num = parseFloat((parseInt(obj.attr("top"))-Core.config.shortcutTop)/90);if(!isNaN(num)){var arowcount = parseInt(($(window).height()-Core.config.shortcutTop)/90);num += parseInt((parseInt(obj.attr("left"))+40-Core.config.shortcutLeft)/90)*arowcount;num = num >= $("#desk ul li:last").index() ? $("#desk ul li:last").index() : num;//如果图标位置有变动则更新if(oldobj.index() != parseInt(num)){//更新domif(num<=0){$("#desk ul li:eq(0)").before(oldobj);}else{$("#desk ul li:eq("+parseInt(num)+")").after(oldobj);}//调用resize方法刷新页面图标坐标Core.resize(0);//更新数据库图标排序(ajax)-待完成}}});
注：“num”就是半透明图标处于图标dom树第几个的位置，因为图标排列是一列一列的，计算公式大致就是：(每列个数*(当前处于第几列-1))+当前处于某列第几个
这次就更新了这么一个大功能，然后修改了一些小的建议，就不列举了。测试地址：http://saw.caifutang.com/eonercms/
孤单寂寞与被遗弃感是最可怕的贫穷
