上一篇博文《我的读者墙展示（附所用JS代码）》中我分享了自己所用的读者墙JavaScript部分代码。其实关于读者墙我还写了一个版本的js效果，不过离我最终的效果还有差距（最终要实现自由拖放，头像碰撞的效果，并能再排序），暂时只是实现了头像的自由拖动摆放。不过还好了，所以也拿出来分享一下。
代码如下（代码以本文所贴为主，所提供demo包中代码可能不会更新，代码中发现错误或bug的修复都会以本文中为主）：
1: var DragUnit=Class.create();//基类的构造，具体参见上篇文章中的开头代码
2: DragUnit.z=1;//z-index的值
3: DragUnit.prototype={
4:
5: init:function(node){//初始化构造
6: this.node=typeof node == 'string'? this.$(node):node;
7: this.node.style.position = "relative";
8: this.node.onmousedown=this.bind(this.start,this);//绑定鼠标按下事件
9: this.node.onmouseup=this.bind(this.end,this);//鼠标松开
10: this.draging = false;//拖动的状态
11: },
12:
13: start:function(e){
14: this.node.style.cursor = "move";//更改被拖动节点的鼠标样式
15: document.onmousemove=this.bind(this.move,this);//绑定鼠标移动事件
16: this.stopPrevent(e);//阻止浏览器的默认行为
17: this.node.style.zIndex = DragUnit.z++;//设置z-index值
18: this.draging = true;//标记拖动状态
19: this.mouseXY = this.getMousePoint(e);
20: },
21:
22: move:function(e){
23: this.stopPrevent(e);
24: if(this.draging){
25: var mouseXY = this.getMousePoint(e);
26: //设置left、top的值
27: this.node.style.left = (parseInt(this.getStyle(this.node,'left'))||0) + mouseXY.x - this.mouseXY.x + "px";
28: this.node.style.top = (parseInt(this.getStyle(this.node,'top'))||0) + mouseXY.y - this.mouseXY.y + "px";
29: this.mouseXY = this.getMousePoint(e);
30: }
31: },
32:
33: end:function(e){
34: document.onmousemove=null;
35: this.node.style.cursor = "auto";
36: this.stopPrevent(e);
37: this.draging = false;
38: },
39:
40: $:function(id){
41: return document.getElementById(id);
42: },
43:
44: $$:function(c, t, p){
45: var at = p.getElementsByTagName(t);
46: var ms = new Array();
47: var r = new RegExp('(^|\\s)' + c.replace(/\-/g, '\\-') + '(\\s|$)');
48: var e;
49: for (var i = 0; i < at.length; i++) {
50: e = at[i];
51: if (r.test(e.className)) {
52: ms.push(e)
53: }
54: }
55: return ms
56: },
57:
58: stopPrevent: function(e) {
59: if (window.event) {
60: window.event.cancelBubble = true;
61: window.event.returnValue = false;
62: return
63: }
64: if (e.preventDefault &;& e.stopPropagation) {
65: e.preventDefault();
66: e.stopPropagation()
67: }
68: },
69:
70: getStyle:function(element,property) {
71: var value = element.style[property];
72: if (!value) {
73: if (document.defaultView &;& document.defaultView.getComputedStyle) {
74: var css = document.defaultView.getComputedStyle(element, null);
75: value = css ? css.getPropertyValue(property) : null;
76: } else if (element.currentStyle) {
77: value = element.currentStyle[property];
78: }
79: }
80: return value == 'auto' ? '' : value;
81: },
82:
83: getMousePoint:function(ev){
84: var x=y=0;
85: if (typeof window.pageYoffset!= 'undefined') {
86: x = window.pageXOffset;
87: y = window.pageYOffset
88: }
89: else
90: if (typeof document.compatMode != 'undefined' &;& document.compatMode != 'BackCompat') {
91: x = document.documentElement.scrollLeft;
92: y = document.documentElement.scrollTop
93: }
94: else
95: if (typeof document.body != 'undefined') {
96: x = document.body.scrollLeft;
97: y = document.body.scrollTop
98: }
99: if(!ev) ev=window.event;
100: x += ev.clientX;
101: y += ev.clientY;
102: return {'x','y':y};
103: },
104:
105: windowXY:function(){
106: return {'x':window.innerWidth || document.documentElement.clientWidth,'y':window.innerHeight || document.documentElement.clientHeight};
107: },
108:
109: bind:function(f,o){
110: return function(){
111: return f.apply(o,arguments);
112: }
113: }
114: }
使用以上代码，只需使用new运算符构造DragUnit类的实例化对象即可。比如有一个id=’dragme’的节点，只需要调用
1: new DragUnit('dragme');
即可为此节点加上拖动效果，使其变得可被拖动。
DEMO可以点击此处查看：DragUnit DEMO
你可以拖动demo里的任意头像。效果兼容所有主流浏览器，从IE6到chrome。
