想写一个通用的 JS 拖曳类,请帮帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.moveNode{width:20px;height:20px;background:red;}
</style>
</head><body>
<div style="position:relative;" class="moveNode" onmousedown="myTMover.startMove(this);" onmouseup="myTMover.stopMove();">a</div>
</body>
</html>
<script type="text/javascript">
<!--
function TMover()
{
this.win;
this.x0 = 0;
this.y0 = 0;
this.x1 = 0;
this.y1 = 0;
this.noIE = document.getElementById && !document.all;
this.moveable=false;
}TMover.prototype.startMove = function(obj)
{
while(obj.style.position!="relative" && obj.style.position!="absolute")
obj = this.noIE? obj.parentElement : obj.parentNode;
this.win = obj;
this.moveable = true;
this.x0 = parseInt(this.win.style.left + 0);
this.y0 = parseInt(this.win.style.top + 0);
this.x1 = this.noIE ? e.clientX : event.clientX;
this.y1 = this.noIE ? e.clientY : event.clientY;
document.onmousemove = this.drag;
return false;
}TMover.prototype.drag = function(e)
{
if(this.moveable)
{
this.win.style.top = (this.noIE ? this.y0 + e.clientY - this.y1 : this.y0 + event.clientY - this.y1) + "px";
this.win.style.left = (this.noIE ? this.x0 + e.clientX - this.x1 : this.x0 + event.clientX - this.x1) + "px";
return false;
}
else
alert("no");
}TMover.prototype.stopMove = function()
{
this.moveable = false;
}var myTMover = new TMover();
//-->
</script>

解决方案 »

  1.   

    cloudgamer 写的一个拖拽效果，值得参考。
      

  2.   

    不过改成如下就可以了,呵呵...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <style type="text/css">
    .moveNode{width:200px;height:100px;background:red;}
    </style>
    </head><body>
    <div style="position:relative;" class="moveNode" onmousedown="myTMover.startMove(this,event);" onmouseup="myTMover.stopMove();">
    <div style="background:gray;cursor:move;">title</div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    <!--
    function TMover()
    {
    var win;
    var x0 = 0;
    var y0 = 0;
    var x1 = 0;
    var y1 = 0;
    var noIE = document.getElementById && !document.all;
    var moveable=false; this.startMove = function(obj,e)
    {
    while(obj.style.position!="relative" && obj.style.position!="absolute")
    obj = noIE? obj.parentNode : obj.parentElement;
    win = obj;

    moveable = true;
    x0 = parseInt(win.style.left + 0);
    y0 = parseInt(win.style.top + 0);
    x1 = noIE ? e.clientX : event.clientX;
    y1 = noIE ? e.clientY : event.clientY;
    document.onmousemove = drag;
    return false;
    } var drag = function(e)
    {
    if(moveable)
    {
    win.style.top = (noIE ? y0 + e.clientY - y1 : y0 + event.clientY - y1) + "px";
    win.style.left = (noIE ? x0 + e.clientX - x1 : x0 + event.clientX - x1) + "px";
    return false;
    }
    } this.stopMove = function()
    {
    moveable = false;
    }
    }
    var myTMover = new TMover();
    //-->
    </script>