编程 Javascript

最精简的JavaScript实现鼠标拖动效果的方法

Posted in Javascript onMay 11, 2015

相对于其它的鼠标拖动效果，这款拖动特效还是比较精简的，而且它还支持鼠标吸附，不按鼠标左键它也可以会跟随鼠标移动；定义时候也相对方便，只用指定被拖动的DIV ID就可以了，扩展性很好。

<!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=utf-8" />
<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="background-color:#0066CC;width:280px;
height:160px;padding:20px;border:1px #003399 solid;
font-size:10.5pt;color:white" onmouseover='Move_obj("drag")'>
<p>这个层是可以拖动的，而且还可以吸附鼠标，试试看！</p>
<p>/</p>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据

Mar 15 Javascript

Javascript string 扩展库代码

Apr 09 Javascript

JavaScript 一道字符串分解的题目

Aug 03 Javascript

js中parseFloat(参数1,参数2)定义和用法及注意事项

Jan 27 Javascript

将json当数据库一样操作的javascript lib

Oct 28 Javascript

javascript获取dom的下一个节点方法

Sep 05 Javascript

jQuery功能函数详解

Feb 01 Javascript

js动态获取子复选项并设计全选及提交的实现方法

Jun 24 Javascript

jQuery实现微信长按识别二维码功能

Aug 26 Javascript

史上最全JavaScript常用的简写技巧（推荐）

Aug 17 Javascript

Vue 报错TypeError: this.$set is not a function 的解决方法

Dec 17 Javascript

Vue实现导航栏的显示开关控制

Nov 01 Javascript

JavaScript实现表格点击排序的方法

May 11 #Javascript

JavaScript点击按钮后弹出透明浮动层的方法

May 11 #Javascript

js实现鼠标移到链接文字弹出一个提示层的方法

May 11 #Javascript

js光标定位文本框回车表单提交问题的解决方法

May 11 #Javascript

jQuery子窗体取得父窗体元素的方法

May 11 #Javascript

js控制div弹出层实现方法

May 11 #Javascript

JavaScript实现点击文字切换登录窗口的方法

May 11 #Javascript