首页 > Web开发 > 详细

JS鼠标拖动

时间:2015-04-23 12:29:50      阅读:344      评论:0      收藏:0      [点我收藏+]

<!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>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="JavaScript" type="text/javascript">

var drag_=false

var D=new Function(‘obj‘,‘return document.getElementById(obj);‘)

var oevent=new Function(‘e‘,‘if (!e) e = window.event;return e‘)

function Move_obj(obj){

 var x,y;

 D(obj).onmousedown=function(e){

  drag_=true;

  with(this){

   style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;

   x=oevent(e).clientX;y=oevent(e).clientY;

   document.onmousemove=function(e){

    if(!drag_)return false;

    with(this){

     style.left=temp1+oevent(e).clientX-x+"px";

     style.top=temp2+oevent(e).clientY-y+"px";

    }

   }

  }

  document.onmouseup=new Function("drag_=false");

 }

}

</script>

<body>

<div id="drag" style="width:280px;height:160px;padding:20px;border:1px #003399 solid;font-size:10.5pt;color:white" onmouseover=‘Move_obj("drag")‘>

  <p>这个层是可以拖动的,而且还可以吸附鼠标,试试看!</p> 

</div>

</body>

</html>

JS鼠标拖动

原文:http://www.cnblogs.com/mrt-yyy/p/4449943.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!