最精简的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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JS删除数组指定值常用方法详解
Jun 04 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实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python实现图片横向和纵向拼接
2020/03/05 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
构建高效课堂实施方案
2014/03/13 职场文书
党员实事承诺书
2014/03/26 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
企业授权委托书范本
2014/04/02 职场文书
签订劳动合同通知书
2015/04/16 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫