最精简的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学习(一)构建自己的JS库
Jan 02 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
vue项目初始化到登录login页面的示例
Oct 31 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导入导出excel实例
2013/10/25 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python计算列表内各元素的个数实例
2018/06/29 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python restful框架接口开发实现
2020/04/13 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python实现GIF图倒放
2020/07/16 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
写给女生的道歉信
2014/01/14 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
入伍通知书
2015/04/23 职场文书
企业年会祝酒词
2015/08/11 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
关于 Python json中load和loads区别
2021/11/07 Python