实现页面元素拖动效果的JS函数

示例代码：http://ymlj11ftp.v323.net/demo/candrag/balance.html

    //拖放效果接口
    
    /**
     * 跨平台的事件监听函数
     * @param {Node} node 需要监听事件的DOM节点
     * @param {String} eventType 需要监听的事件类型
     * @param {Function} callback 事件监听回调函数
     * @type Function 返回值为函数类型
     * @return 返回监听回调函数的引用，用于释放监听
     */
    function bindEvent(node,eventType,callback){
        if(node.attachEvent){
            if(eventType.indexOf('on')){eventType = 'on'+eventType;}
            node.attachEvent(eventType,callback);
        }else{
            if(!eventType.indexOf('on'))
                    eventType = eventType.substring(2,eventType.length);
            node.addEventListener(eventType,callback,false);    
        }
        return callback;
    }
    
    /**
     * 跨平台的事件监听卸载函数
     * @param {Node} node 需要卸载监听事件的DOM节点
     * @param {String} eventType 需要卸载监听的事件类型
     * @param {Function} callback 卸载事件监听回调函数
     */
    function removeEvent(node,eventType,callback){
        if(node.detachEvent){
            if(eventType.indexOf('on')){eventType = 'on'+eventType;}
            node.detachEvent(eventType,callback);
        }else{
            if(!eventType.indexOf('on'))
                    eventType = eventType.substring(2,eventType.length);
            node.removeEventListener(eventType,callback,false);    
        }
    }
    
    /**
     * 兼容不同定位方式的通用拖动接口
     * @param {Node} dragger 需要被拖动的元素
     */
     //必须告诉系统，哪些元素是可以进行交互，而哪些是不行
function canDrag(dragger,onStart,onDrag,onComplete,droppables){
    var drag = bindEvent(dragger,'onmousedown',function(e){
    //兼容事件对象
    e = e || event;

    //兼容坐标属性
    var pageX = e.clientX||e.pageX;
    var pageY = e.clientY||e.pageY;
    
    //兼容样式对象
    var style = dragger.currentStyle||window.getComputedStyle(dragger,null);
    //当没有设置left和top属性时，IE下默认值为auto
    var offX = parseInt(style.left)||0;
    var offY = parseInt(style.top)||0;
    
    //获取鼠标相对于元素的间距
    var offXL = pageX - offX;
    var offYL = pageY - offY;
    
    //为dragger增加onDrag属性，用来存储拖动事件
    if(!dragger.onDrag){
        //监听拖动事件
        dragger.onDrag = bindEvent(document,'onmousemove',function(e){
            e = e || event;
            var x = e.clientX||e.pageX;
            var y = e.clientY||e.pageY
            //设置X坐标
            dragger.style.left = x - offXL+'px';
            //设置Y坐标
            dragger.style.top = y - offYL+'px';
            
            //当鼠标移动到可交互元素时，交互元素做出的反映
            //无法使用onmouseover/onmouseout，因为被上层元素所挡
            if(droppables)
            for(var i=0;i<droppables.length;i++){
                //当鼠标点与交互元素重叠时处理，
                //模拟onmouseover和onmouseout事件
                if(x > droppables[i].offsetLeft &&
                     x < droppables[i].offsetLeft+droppables[i].offsetWidth &&
                     y > droppables[i].offsetTop &&
                     y < droppables[i].offsetTop+droppables[i].offsetHeight ){
                    droppables[i].inside = 1;
                    droppables[i].onOver.call(droppables[i],dragger);
                }else if(droppables[i].inside == 1){
                    //inside标志表示if体内的语句只会在鼠标与交互元素重叠过以后才会执行，
                    //而不是当onmousemove发生时，不停的执行，避免了浪费资源
                    droppables[i].inside = 0;
                    droppables[i].onOut.call(droppables[i],dragger);
                }
            }
            
            //回调函数
            if(onDrag)
                onDrag.call(dragger,e);
        });
        
        //监听拖动结束事件
        dragger.onDragEnd = bindEvent(document,'onmouseup',function(e){
            //释放前读取事件对象
            var x = e.clientX||e.pageX;
            var y = e.clientY||e.pageY

            //释放拖动监听和结束监听
            removeEvent(document,'onmousemove',dragger.onDrag);
            removeEvent(document,'onmouseup',dragger.onDragEnd);
            try{
                //删除拖动时所用的属性，兼容FF使用
                delete dragger.onDrag;
                delete dragger.onDragEnd;
            }catch(e){
                //删除拖动时所用的属性，兼容IE6使用
                dragger.removeAttribute('onDrag');
                dragger.removeAttribute('onDragEnd');
            }        
            
            
            //当光标停留在在可交互元素上松开鼠标按键时，交互元素做出的反映
            if(droppables)
            for(var i=0;i<droppables.length;i++){
                //当鼠标点与交互元素重叠时处理，
                //模拟onmouseover和onmouseout事件
                if(x > droppables[i].offsetLeft &&
                     x < droppables[i].offsetLeft+droppables[i].offsetWidth &&
                     y > droppables[i].offsetTop &&
                     y < droppables[i].offsetTop+droppables[i].offsetHeight ){
                         
                    droppables[i].onDrop.call(droppables[i],dragger);
                }
            }
            
            //回调函数
            if(onComplete)
                onComplete.call(dragger,e);
        });
    }
    
    //回调函数
    if(onStart)
        onStart.call(dragger,e);
    });
    return function(){
        //返回一个可以取消拖动功能的函数引用
        //释放拖动监听和结束监听
        removeEvent(document,'onmousemove',dragger.onDrag);
        removeEvent(document,'onmouseup',dragger.onDragEnd);
        try{
            //删除拖动时所用的属性，兼容FF使用
            delete dragger.onDrag;
            delete dragger.onDragEnd;
        }catch(e){
            //删除拖动时所用的属性，兼容IE6使用
            dragger.removeAttribute('onDrag');
            dragger.removeAttribute('onDragEnd');
        }
    }
}

示例代码：http://ymlj11ftp.v323.net/demo/candrag/balance.html