最精简的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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python实现二分查找算法
2020/09/18 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
临床护理求职信
2014/04/26 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
单位工作证明书格式
2014/10/04 职场文书