当前位置：首页 → 问答吧 → js怎么实现一个拖拽事件

js怎么实现一个拖拽事件

时间：2011-10-15

来源：互联网

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

作者: bj050323 发布时间: 2011-10-15

HTML code


记得最近论坛里好像出现过，找了个过来
<!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>

作者: BLUE_LG 发布时间: 2011-10-15

引用 1 楼 blue_lg 的回复:
HTML code

记得最近论坛里好像出现过，找了个过来
<!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"……

找专门的网页制作特效的网站。里面有很多。

作者: yisiyou 发布时间: 2011-10-15

js怎么实现一个拖拽事件

热门阅读

热门下载