一个用用js实现的拖动方法
有时候有些页面我们没必要引入jquery这样的类库，而我们有时候又得实现某个div层的拖动，这时候这个东东就派上用场了。。。
上传附件上传了好几次 上不去 。。。 贴代码吧/**
 * js拖动类 目前一个对象只能够使一个容器得到拖动
 * @author yulipu
* 用法1 普通div
 *    
 *        这里是内容
 *
* var drag = new ydrag();
 * drag.drag({
 *         targetdragobj : document.getelementbyid('outer'),  //必须项 要拖动的目标对象
 *        dragx : false,  //不允许横向拖动
 *        dragy : true
 * });  
 * 
 * 用法2 模拟对话框
 *    
 *        这里是标题
*        这里是内容
*
* var drag = new ydrag();
 * drag.drag({
 *         targetdragobj : document.getelementbyid('outer'),  //必须项 要拖动的目标对象
 *        srcdragobj : document.getelementbyid('title'),  //非必须项 指定标题部分div
 *        dragx:false,  //不允许横向拖动
 *        callback : function(){
                       //alert(this.x);  // x坐标
                       //alert(this.y);  // y坐标
                }  //指定一个回调函数 这个函数可以得到当前容器坐标位置 
 * });  
 */
function ydrag() {
    var diffx = 0;  //当前鼠标和容器left距离的差  当前位置-这个差值就是容器的left值
    var diffy = 0;
    var _self = this;
    var options = {};
var ye = {
        /**
         * 添加事件
         * @param ele 要添加事件的元素
         * @param type 事件类型 如click
         * @param fun 回调函数
         */
        bind : function(ele, type, fun) {
            if(ele.addeventlistener) {  //ff
                ele.addeventlistener(type, fun, false);
            }else if(ele.attachevent) {  //ie
                ele.attachevent('on' + type, fun);
            } else {  //dom
                ele['on'+type] = fun;
            }
        },
/**
         * 删除事件
         */
        unbind : function(ele, type, fun) {
            if(ele.removeeventlistener) {
                ele.removeeventlistener(type, fun, false);
            } else if(ele.detachevent) {
                ele.detachevent('on' + type, fun);
            } else {
                ele['on'+type] = null;
            }
        }
    };
this._mousedown = function(e) {
        e = e || window.event;
        options.targetdragobj.style.position = 'absolute';
diffx = e.clientx - options.targetdragobj.offsetleft;  //初始化差值
        diffy = e.clienty - options.targetdragobj.offsettop;
        ye.bind(document, 'mousemove', _self._mousemove);  //往document上添加事件 当鼠标在document范围内移动式都触发移动事件
        ye.bind(document, 'mouseup', _self._mouseup);
    };
this._mousemove = function(e) {
        e = e || window.event;
        if(options.dragable) {
            options.dragx && (options.targetdragobj.style.left = e.clientx - diffx + 'px');
            options.dragy && (options.targetdragobj.style.top =  e.clienty - diffy + 'px');
            if(options.callback){
                //返回当前容器坐标
                var obj = {'x' : e.clientx - diffx, 'y' : e.clienty - diffy};
                options.callback.call(obj);
            }
        }
    };
this._mouseup = function(e) {
        ye.unbind(document, 'mousemove', _self._mousemove);
        ye.unbind(document, 'mouseup', _self._mouseup);
    };
this.drag = function(opt) {
        options = {
            dragable : true,
            targetdragobj : opt.targetdragobj,
            srcdragobj : opt.srcdragobj,
            dragx : opt.dragx != false,  //横向拖动
            dragy : opt.dragy != false,  //纵向拖动
            callback : opt.callback
        };
        if(options.srcdragobj) {options.srcdragobj.style.cursor='move';} else {options.targetdragobj.style.cursor='move'}
        undefined == options.srcdragobj ? 
            ye.bind(options.targetdragobj, 'mousedown', this._mousedown) :
            ye.bind(options.srcdragobj, 'mousedown', this._mousedown);
    };
}
ad：真正免费，域名+虚机+企业邮箱=0元