跪求M$网站的这个拖动图层效果！链接附内。

Question

这个不算什么，看看my.msn.com吧，
我目前已经可以基本做到了，
比较复杂，主要是前台后台的搭配，
但是２０分也太少了吧！
：）

Answer 1

你原来是<img src="xxxx">
现在换成
<input type="image" src="xxxx"> 就可以拖动了.<script>
function beginDrag(elementToDrag,event)  {    var delatX=event.clientX-parseInt(elementToDrag.style.left);
    var delatY=event.clientY-parseInt(elementToDrag.style.top);
    document.attachEvent("onmousemove",moveHandler);
    document.attachEvent("onmouseup",upHandler);
    event.cancelBubble=true;
    event.returnValue=false;    function moveHandler(e)  {
    if(!e) e=window.event;  
    elementToDrag.style.left=(e.clientX-delatX)+"px";
    elementToDrag.style.top=(e.clientY-delatY)+"px";
    e.cancelBubble=true;
    }    function upHandler(e) {
    if(!e) e=window.event;  
    document.detachEvent("onmouseup",upHandler);
    document.detachEvent("onmousemove",moveHandler);
    e.cancelBubble=true;
    elementToDrag.style.left=elementToDrag.style.left;
    elementToDrag.style.top=elementToDrag.style.top;
    }   
}</script>
<input type="image" src="csdn.gif" id=bao
style="position:absolute;left:0px;top:0px;"
onmousedown="beginDrag(this,event);">
<script>

Answer 2

多谢wanghr100(灰豆宝宝.net)！我也找到了相关的方法，呵呵，也是抄别人的。/////////////////////////////////////////
// Mouse drag and drop tool bar.
////////////////////////////////////////
var canmove;
var oldFunc;
function move()
{
if(event.button == 1 && canmove)
{
var szElement = document.all.toolbarContent; // Whickh i want to move and drag ...
var sx = szElement.style.posLeft+event.clientX-Cx;
var sy = szElement.style.posTop +event.clientY-Cy;
Cx = event.clientX;
Cy = event.clientY;
szElement.style.posLeft = sx;
szElement.style.posTop = sy;
}
return false;
}function drags()
{
if(event.button!=1) return;
canmove = true;
Cx = event.clientX;
Cy = event.clientY;
oldFunc = document.onmousemove;
document.onmousemove = move;
}function drops()
{
canmove = false;
var szElement = document.all.toolbarContent;
var sx = szElement.style.posLeft;
var sy = szElement.style.posTop;         // Limit it to a inner box.
if(sx > document.body.offsetWidth-70) 
sx = document.body.offsetWidth - 70;
if(sx < 0) 
sx = 5;
if(sy > document.body.offsetHeight-180) 
sy = document.body.offsetHeight - 180;
if(sy < 0) 
sy = 5; szElement.style.posLeft = sx;
szElement.style.posTop = sy;
document.onmousemove = oldFunc;
return;
}在页面中：
<img src="images/gripBlue.gif" style="cursor:move" onmousedown="drags();" onmouseup="drops();">其实，原理就是响应 mousedown event,然后在其中注册onmousemove事件，而不是在 img 标签的onmousemove事件中直接写代码。不过，我还是喜欢wanghr100(灰豆宝宝.net)的方法。