放大图片的拖动如何实现

页面上这个按钮添加一个绑定事件

html代码如下：
<a class="uploadimg" onclick="ImgBrow.show('../images/housePic.png');"></a>

页面弹出这个放大的图片，并且这个图片能够实现局部放大，效果如下

这段js代码如下
ImgBrow.show = function(imgUrl) {
ImgBrow.instance = new ImgBrow(imgUrl);
}

function ImgBrow() {

this.initialize.apply(this, arguments);

}

ImgBrow.prototype = {

boxTemplate: [
    '<div class="popWin" >',
    '<div id="img_warp" class="img_warp">',
    '<img id="currentPic1" class="current" border="0" alt="" src="@params" width="1280" height="800" />',
    '</div>',
    '<div id="expand" class="expand"></div>',
    '<a class="closewin" onclick="ImgBrow.instance.dispose()"></a>',
    '<div class="bordershadow_0 bs-l"></div>',
    '<div class="bordershadow_0 bs-r"></div>',
    '<div class="bordershadow_0 bs-t"></div>',
    '<div class="bordershadow_0 bs-b"></div>',
    '</div>'
],

initialize: function(imgUrl) {
    this.imgUrl = imgUrl;
    this.addWinBox();
},
addWinBox: function() {
    var boxHtm = this.boxTemplate.join('');
    boxHtm = boxHtm.replace('@params', this.imgUrl);
    $(boxHtm).appendTo("body");
    this.initImgsBrowse({
        berviary: "currentPic1",
        expand: {
            id: "expand",
            style: {
                'z-index': '99'
            }
        },
        clip: {
            width: "100px",
            height: "100px"
        },
        opacity: "0.3"
    });

},
initImgsBrowse: function(opts) {
    applyImgsBox(opts);
},
dispose:function(){
   $(".popWin").remove();
}

}

function applyImgsBox(opts) {

function _(objId) {
    return (typeof objId === "string") ? document.getElementById(objId) : objId;
}
var beImg, expand, clip, cover, warp, expImg;
var clipWidth, clipHeight;
var closeTimeId = null;
var mult = 1;      //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整 
//init 
(function() {
    beImg = _(opts.berviary);
    warp = beImg.parentNode;

    cover = document.createElement("div");
    warp.appendChild(cover);
    cover.style.position = "absolute";
    cover.style.top = "0px";
    cover.style.left = "0px";
    cover.style.backgroundColor = "#ccc";
    var opac = parseFloat(opts.opacity) || 0.3;
    cover.style.opacity = opac;
    cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";
    cover.style.width = "100%";
    cover.style.height = "100%";
    cover.style.zIndex = 2;
    cover.style.visibility = "hidden";

    clip = document.createElement("img");
    warp.appendChild(clip);

    clipWidth = (opts.clip && opts.clip.width) || "60px";
    clipHeight = (opts.clip && opts.clip.height) || "60px";

    clip.src = beImg.src;
    clip.className = beImg.className;
    clip.style.position = "absolute";
    clip.style.top = "0px";
    clip.style.left = "0px";
    clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";
    clip.style.backgroundColor = "#ccc";
    clip.style.zIndex = 3;

    //ie里面会变态的自动设置宽度和高度 
    clip.removeAttribute("width");
    clip.removeAttribute("height");
})();

function layerPos(e) {
    if (e.layerX && e.layerY) {
        return {
            x: e.layerX,
            y: e.layerY
        };
    } else {
        return {
            x: e.x,
            y: e.y
        };
    }
}

function absolutePos(e) {
    if (e.pageX && e.pageY) {
        return {
            x: e.pageX,
            y: e.pageY
        };
    } else {
        // var x = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        // var y = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        var x = e.clientX;
        var y = e.clientY
        return {
            x: x,
            y: y
        };
    }
}

var showExpand = function(x, y, e) {
    if (!expand) {
        initExpand();
    }

    expImg.style.left = (-1 * x) * mult + "px";
    expImg.style.top = (-1 * y) * mult + "px";

    if ((!opts.expand) || (!opts.expand.id)) {
        var aPos = absolutePos(e);
        expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";
        expand.style.top = aPos.y + "px";
    }

    //初始化放大的div 
    function initExpand() {
        if (opts.expand && opts.expand.id) {
            expand = _(opts.expand.id);
        } else {
            expand = document.createElement("div");
            if (opts.expand && opts.expand.style) {
                for (var p in opts.expand.style) {
                    expand.style[p] = opts.expand.style[p];
                }
            }
            expand.style.border = "1px solid #000";

            expand.style.position = "absolute";
            expand.style.left = "0";
            expand.style.right = "0";
            expand.style.display = "block";
            expand.style.zIndex = '99';
            document.body.appendChild(expand);

            if (clip.clientWidth > clip.clientHeight) {
                expand.style.width = clip.clientWidth + "px";
                expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";
            } else {
                expand.style.height = clip.clientHeight + "px";
                expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";
            }

        }

        expand.style.overflow = "hidden";
        if ((expand.style.position != "relative") && (expand.style.position != "absolute")) {
            //变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 
            expand.style.position = "relative";
            expand.style.left = "0";
            expand.style.top = "0";
        }
        expImg = document.createElement("img");
        expImg.src = beImg.src;
        expImg.style.position = "relative";
        expImg.style.zIndex = "99";
        expImg.style.left = "0px";
        expImg.style.top = "0px";
        expand.appendChild(expImg);
        expImg.removeAttribute("width");
        expImg.removeAttribute("height");

        //计算图片放大的倍数 
        var ew = expand.clientWidth;
        var eh = expand.clientHeight;
        var cw = parseFloat(clipWidth);
        var ch = parseFloat(clipHeight);
        mult = (ew / cw < eh / ch) ? ew / cw : eh / ch;

        //调整放大图片的大小 
        expImg.style.width = beImg.clientWidth * mult + "px";
        expImg.style.height = beImg.clientHeight * mult + "px";
    }

}

cover.onmousemove = clip.onmousemove = function(e) {

    $("body").scrollTop(0);

    var e = e || event;
    var pos = layerPos(e);
    var x = pos.x;
    var y = pos.y;
    //判断x和y坐标有没有超出范围 
    var w = parseFloat(clipWidth) / 2,
        h = parseFloat(clipHeight) / 2;

    x = (x < w) ? w : x;
    y = (y < h) ? h : y;
    x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;
    y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;
    clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";
    showExpand(x - w, y - h, e);
}
warp.onmouseover = cover.onmouseover = clip.onmouseover = function() {
    //如果清除的定时器存在,则删除. 
    if (closeTimeId) {
        clearTimeout(closeTimeId);
        closeTimeId = null;
    }
    if (cover.style.visibility === "hidden") {
        cover.style.visibility = "visible";
    }
    if (expand && expand.style.display === "none") {
        expand.style.display = "block";
    }
}

warp.onmouseout = function() {
    //延迟一定时间后清除 
    closeTimeId = setTimeout(function() {
        cover.style.visibility = "hidden";

        if ((!opts.expand) || (!opts.expand.id)) {
            expand.style.display = "none";
        }
    }, 130);
}

return {
    clear: function() {
        //在这里清除放大镜效果 
        warp.removeChild(clip);
        warp.removeChild(cover);
        warp.onmouseout = null;
        if ((!opts.expand) || (!opts.expand.id)) {
            expand.style.display = "none";
        }
    }
}

}

问题是：如何实现这个放大图片的拖动？在js中添加怎样的代码？