最精简的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 相关文章推荐
javascript不可用的问题探究
Oct 01 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
javascript实现获取服务器时间
May 19 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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 header函数分析详解
2011/08/06 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Javascript模块模式分析
2008/05/16 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
webpack打包非模块化js的方法
2018/10/24 Javascript
python实现360的字符显示界面
2014/02/21 Python
在Django中创建动态视图的教程
2015/07/15 Python
python生成式的send()方法(详解)
2017/05/08 Python
python 全局变量的import机制介绍
2017/09/07 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
使用python实现链表操作
2018/01/26 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python对List中的元素排序的方法
2018/04/01 Python
python区块及区块链的开发详解
2019/07/03 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
求职信需要的五点内容
2014/02/01 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
专家推荐信范文
2015/03/26 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
关于使用Redisson订阅数问题
2022/01/18 Redis
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript