新浪特有的div移动怎么做？？？

就是在博客和微博中的用的，，，比如一个div要移动，本身不变，出现一个等大的虚线框移动，停下后，div移动到虚线框位置。。
这效果不错啊，，有什么思路？？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这段代码就可以了
http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html
http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html
onmousedown生成一个虚框
onmousemove移动虚框
onmouseup移动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>