新浪特有的div移动怎么做？？？
就是在博客和微博中的用的，，，比如一个div要移动，本身不变，出现一个等大的虚线框移动，停下后，div移动到虚线框位置。。
这效果不错啊，，有什么思路？？
[解决办法]
继续蹭分。。。
<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>