码迷,mamicode.com
首页 > Web开发 > 详细

JS鼠标拖动

时间:2015-04-23 12:30:07      阅读:139      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!