最精简的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程序设计有所帮助。

Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
You might like
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
Vue调用后端java接口的实例代码
2019/10/28 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python实现身份证号码解析
2015/09/01 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
分享python数据统计的一些小技巧
2016/07/21 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
J2EE模式面试题
2016/10/11 面试题
2014年公司迎新年活动方案
2014/02/24 职场文书
法人授权委托书格式
2014/04/08 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
休假证明书
2015/06/24 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis