新浪特有的div移动如何做？ _JavaScript

新浪特有的div移动怎么做？？？
就是在博客和微博中的用的，，，比如一个div要移动，本身不变，出现一个等大的虚线框移动，停下后，div移动到虚线框位置。。

这效果不错啊，，有什么思路？？

------解决方案--------------------
继续蹭分。。。
HTML code

<html>
<head>
<title>title</title>
</head>
<body>
<div id="range" style="width:800px; height:800px; border:1px solid #333;">
    fsfdsfdsf
    fdsfd
</div><div id="bb" style="width:200px; height:200px; background-color:blue; left:0; top:0; overflow:hidden;">
        <div id="ss" style="height:20px; background-color:red;"></div>
        <div><img src="x.png"></div>
    </div>
<script type="text/javascript">
(function(window){
    var document = window.document;
    var Drag = function(activeDom,dragDom){
        this.mousedownHandle = this.getMousedownHandle();
        this.mousemoveHandle = this.getMousemoveHandle();
        this.mouseupHandle = this.getMouseupHandle();
        this.bind(activeDom,dragDom);
    }
    Drag.prototype = {
        bind:function(activeDom,dragDom){
            if(!activeDom)return;
            dragDom = dragDom||activeDom;
            dragDom.style.position = 'absolute';
            activeDom.style.cursor = 'move';
            this.activeDom = activeDom;
            this.dragDom = dragDom;
            return this;
        },
        setRange:function(dom){
            this.range = dom;
        },
        start:function(){
            this.listenEvent(this.activeDom,'mousedown',this.mousedownHandle);
            return this;
        },
        stop:function(){
            this.removeEventListen(this.activeDom,'mousedown',this.mousedownHandle);
            this.activeDom.style.cursor = 'default';
            return this;
        },
        getMousedownHandle:function(){
            _this = this;
            return function(e){
                e = e || window.event;
                _this.dx = e.clientX - _this.dragDom.offsetLeft;
                _this.dy = e.clientY - _this.dragDom.offsetTop;
                _this.listenEvent(document,'mousemove',_this.mousemoveHandle);
                _this.listenEvent(document,'mouseup',_this.mouseupHandle);
                _this.agency = _this.agency || _this.dragDom.cloneNode(false);
                _this.agency.style.background='none';
                _this.agency.style.border = '2px solid #ccc';
                _this.agency.style.left = e.clientX - _this.dx + 'px';
                _this.agency.style.top = e.clientY - _this.dy + 'px';
                _this.agency.style.zIndex = "999999";
                document.body.appendChild(_this.agency);
                _this.preventDefault(e);
                _this.onDragBegin && _this.onDragBegin.call(_this.dragDom);
            }            
        },
        getMousemoveHandle:function(){
            _this = this;
            return function(e){
                e = e || window.event;
                _this.setPosition(e.clientX - _this.dx,e.clientY - _this.dy);
                _this.preventDefault(e);
            }
        },
        getMouseupHandle:function(){
            _this = this;
            return function(e){
                e = e || window.event;
                _this.dragDom.style.left = _this.agency.offsetLeft+'px';
                _this.dragDom.style.top = _this.agency.offsetTop+'px';
                _this.removeEventListen(document,'mousemove',_this.mousemoveHandle);
                _this.removeEventListen(document,'mouseup',_this.mouseupHandle);
                document.body.removeChild(_this.agency);
                _this.onDragEnd && _this.onDragEnd.call(_this.dragDom);
            }
        },
        setPosition:function(x,y){
            var range;
            if(range = _this.range){
                if(x<range.offsetLeft)x=range.offsetLeft;
                if(y<range.offsetTop)y=range.offsetTop;
                if(x>range.offsetLeft+range.offsetWidth-_this.agency.offsetWidth)x=range.offsetLeft+range.offsetWidth-_this.agency.offsetWidth;
                if(y>range.offsetTop+range.offsetHeight-_this.agency.offsetHeight)y=range.offsetTop+range.offsetHeight-_this.agency.offsetHeight;
            }
            _this.agency.style.left = x + 'px';
            _this.agency.style.top = y + 'px';
        },
        listenEvent:function(dom,evtType,callback){
            if(window.addEventListener){
                dom.addEventListener(evtType,callback,false);
            }else{
                dom.attachEvent('on'.concat(evtType),callback);
            }
        },
        removeEventListen:function(dom,evtType,callback){
            if(window.removeEventListener){
                dom.removeEventListener(evtType,callback,false);
            }else{
                dom.detachEvent('on'.concat(evtType),callback);
            }
        },
        preventDefault:function(e){
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.cancelBubble = true;
                e.returnValue = false;
            }
        }
    }
    window.Drag = Drag;
})(window);
var drag = new Drag();
drag.bind(document.getElementById('ss'),document.getElementById('bb'));
drag.setRange(document.getElementById('range')); // 限制拖动范围，注释掉就不限制拖动范围
drag.onDragBegin = function(){
    //this.getElementsByTagName('div')[1].innerHTML = 'draging...';
}
drag.onDragEnd = function(){
    //this.getElementsByTagName('div')[1].innerHTML = 'stop drag...';
}
drag.start();
// drag.stop();
</script>
</body>
</html>