最精简的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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Javascript 解疑
Nov 11 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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实现递归循环每一个目录
2010/08/08 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP静态成员变量
2017/02/14 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
shiro授权的实现原理
2017/09/21 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
js实现计算器功能
2020/08/10 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
2014年教师节寄语
2014/08/11 职场文书
教师三严三实心得体会
2014/10/11 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
高中运动会前导词
2015/07/20 职场文书
《实心球》教学反思
2016/02/23 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
浅谈Python中的正则表达式
2021/06/28 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA