js怎么实现一个拖拽事件

我是这么做的, 用一个bool值来判断鼠标左键按下, 然后改变元素位置, 但是问题是如果快速移动会丢失目标, 然后不按左键它也会拖拽.......
附带问下怎么让鼠标停在元素上让它消失

解决方案 »

  1.   


    记得最近论坛里好像出现过，找了个过来
    <!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>拖拽</title>
    <style>
    html,body{height:100%;overflow:hidden;}
    body,div,h2{margin:0;padding:0;}
    body{font:12px/1.5 Tahoma;}
    #win{position:absolute;top:40%;left:33%;width:400px;height:33px;background:#fc0;cursor:move;}
    #win1{position:absolute;top:59%;left:59%;width:400px;height:33px;background:#fc0;cursor:move;}</style>
    <script>
    window.onload = function ()
    {
     var oWin = document.getElementById("win");
     var bDrag = false;
     var disX = disY = 0;
     oWin.onmousedown = function (event){  
      bDrag = true;
      disX = event.clientX - oWin.offsetLeft;
      disY = event.clientY - oWin.offsetTop;  
      return false
     };
     document.onmousemove = function (event){
      if (!bDrag)
       return;
      var iL = event.clientX - disX;
      var iT = event.clientY - disY;
      
      //把图层范围定在浏览器窗口内
      var maxL = document.documentElement.clientWidth - oWin.offsetWidth;
      var maxT = document.documentElement.clientHeight - oWin.offsetHeight;  
      iL = iL < 0 ? 0 : iL;
      iL = iL > maxL ? maxL : iL;   
      iT = iT < 0 ? 0 : iT;
      iT = iT > maxT ? maxT : iT;
      
      oWin.style.marginTop = oWin.style.marginLeft = 0;
      oWin.style.left = iL + "px";
      oWin.style.top = iT + "px";  
      return false
     };
     document.onmouseup = function (){
      bDrag = false;    
     };
    };
    </script>
    </head>
    <body>
    <div id="win">0</div>
    </body>
    </html>
      

  2.   


    javascript 模仿windows拖动 封装类
      

  3.   

    onmousemove的时候元素跟着鼠标走就行了
    onmousedown的时候让onmousemove的代码允许执行，onmouseup的时候不允许执行
    这个允不允许用个bool值来控制就好了
      

  4.   

    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="show" style="width:100px; height:100px; position:absolute; top:0px; left:0px; background:#669900">div1:我可以被拖动</div> 
        <script>  
        function drag(elem, container){
            var state = false, original_x, original_y, zindex_buf;
            var _container = container ? container : document;
            elem.onmousedown = function(event){
                var e = event ? event : window.event;
                original_x = e.clientX;
                original_y = e.clientY;
                original_left = this.offsetLeft;
                original_top = this.offsetTop;
                state = true;
                zindex_buf = this.style.zIndex;
                this.style.zIndex = 10000;
            }
            _container.onmousemove = function(event){
                if(state){
                    var e = event ? event : window.event;
                    elem.style.left = e.clientX - original_x + original_left;
                    elem.style.top = e.clientY - original_y + original_top;
                }
            }
            _container.onmouseup = function(event){
                if(state){
                    elem.style.zIndex = zindex_buf;
                    state = false;
                    original_x = 0;
                    original_y = 0;
                    original_left = 0;
                    original_top = 0;
                }
            }
        }
        drag(document.getElementById('show'));
    </script> 
    </body>
    </html>