拖拽在firefox无效


<body onload="init()">
<div id="win">
</div>
</body>
body
{
font-family:Verfana;
font-size:11px;
color:#333333;
}
#win
{
position:absolute;
left:50px;
top:50px;
width:200px;
height:150px;
border:1px solid #000000;
background:yellow;
}
var win;
var left=50;
var top=50;
var move=false;
function init()
{
win=document.getElementById("win");
win.onmousedown=startDrag;
win.onmousemove=drag;
win.onmouseup=stopDrag;
};
function startDrag(event)
{
left=event.PageX-left;
top=event.PageY-top;
win.style.background="red";
move=true;
};
function drag()
{
if(move)
{
win.style.background="blue";
win.style.left=event.PageX-left;
win.style.top=event.PageY-top;
captureEvents();
//win.setCapture();
}
};
function stopDrag()
{
win.style.background="yellow";
left=event.PageX-left;
top=event.PageY-top;
routeEvent();
//win.releaseCapture();
move=false;
};

解决方案 »

  1.   

    var win;
    var left=50;
    var top=50;
    var move=false;
    function init()
    {
        win=document.getElementById("win");
        win.onmousedown=startDrag;
        win.onmousemove=drag;
        win.onmouseup=stopDrag;
    };
    function startDrag(event)
    {
            left=event.pageX-left;
            top=event.pageY-top;
            win.style.background="red";
            move=true;
    };
    function drag(event)
    {
        if(move)
        {
            win.style.background="blue";
            win.style.left=event.pageX-left;
            win.style.top=event.pageY-top;
            captureEvents();
            //win.setCapture();
        }
    };
    function stopDrag(event)
    {
        win.style.background="yellow";
        left=event.pageX-left;
        top=event.pageY-top;
        routeEvent();
        //win.releaseCapture();
        move=false;
    };
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>dragDiv.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
    font-family:Verfana;
    font-size:11px;
    color:#333333;
    }
    #win {
    position:absolute;
    left:50px;
    top:50px;
    width:200px;
    height:150px;
    border:1px solid #000000;
    background:yellow;
    }
    </style>
    <script type="text/javascript">
    var win;
    var left = 50;
    var top = 50;
    var move = false;
    function init() {
        win = document.getElementById("win");
        win.onmousedown = startDrag;
        win.onmousemove = drag;
        win.onmouseup = stopDrag;
    };

    function startDrag(event) {
    event = event || window.event;
    var x = event.pageX || event.x;
            var y = event.pageY || event.y;
            left = x - left;
            top = y - top;
            win.style.background = "red";
            move = true;
    };

    function drag(event) {
        if(move) {
    event = event || window.event;
            win.style.background = "blue";
            var x = event.pageX || event.x;
             var y = event.pageY || event.y;
            win.style.left = x - left + "px";
            win.style.top = y - top + "px";
            //captureEvents();
            //win.setCapture();
        }
    };

    function stopDrag(event) {
    event = event || window.event;
        win.style.background="yellow";
        var x = event.pageX || event.x;
            var y = event.pageY || event.y;
        left = x - left;
        top = y - top;
        //routeEvent();
        //win.releaseCapture();
        move = false;
    };

    </script>
      </head>
      
    <body onload="init()">
    <div id="win">
    </div>
    </body>
    </html>
    兼容ie6 ff
      

  3.   

    呃，原来是我代码搞错了。罪过罪过
    不过又得出一个问题
    就是移动过快的时候
    指针离开了div
    再次去移动的时候
    就会出现一种一碰就弹开的现象
    这个怎么解决？
    IE还好说
    有setCapture()函数搞定
    firefox就不行。。
    怎么办呢？
    请给点指点
      

  4.   

    在FF中，与IE的setCapture()、releaseCapture()相对应的方法为：
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)、window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP)
      

  5.   

    那么应该把代码放在哪个方法之中？怎么放置？
    我试了下
    感觉还是会出现快速移开再次返回
    还会继续出现弹开的BUG
    而IE的setcapture()则不会？
    这是什么原因呢？
      

  6.   

    win.onmouseup=stopDrag;
    改为：
    document.onmouseup=stopDrag;
    试试看
      

  7.   

    哥们，我现在要点的对象是DIV不是整个文档
      

  8.   

    最近改成了这样
    还是出现原来的漏洞
    而且感觉BUG更多
    郁闷中//*************FIREFOX拖曳***********
    var win;
    var left=50;
    var top=50;
    var move=false;
    function init()
    {
    win=document.getElementById("win");
    win.onmousedown=startDrag;
    win.onmousemove=drag;
    document.onmouseup=stopDrag;
    };
    function startDrag(event)
    {
    left=event.pageX-left;
    top=event.pageY-top;
    win.style.background="red";
    //document.captureEvents(Event.MOUSEMOVE);
    move=true;
    };
    function drag(event)
    {
    if(move)
    {
    win.style.background="blue";
    win.style.left=event.pageX-left+"px";
    win.style.top=event.pageY-top+"px";
    //document.captureEvents(Event.MOUSEUP);
    }
    };
    function stopDrag(event)
    {
    win.style.background="yellow";
    left=event.pageX-left;
    top=event.pageY-top;
    //document.routeEvent(Event.MOUSEMOVE);
    //document.routeEvent(Event.MOUSEUP);
    move=false;
    };