javascript实现简单的鼠标拖动效果实例


Posted in Javascript onApril 10, 2015

本文实例讲述了javascript实现简单的鼠标拖动效果。分享给大家供大家参考。具体分析如下:

用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以自己拖动到相应位置。

下面先写一个简单的可以实现鼠标拖动的效果。

当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值。
当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值。
当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何动作。

要点一:

disx = oevent.clientX - box.offsetLeft;

要确定拖动的时候鼠标点在元素的位置,就是鼠标位置减去元素的左边距离。

要点二:

box.style.left = oevent.clientX - disx + "px";

拖动时元素的位置,鼠标的当前位置减去前面刚计算的值。

好了,上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

再改进一下,上面的鼠标拖动没有限制范围,有时会拖动窗口外面看不见了。下面就限制下范围

要点一:如下,如果元素的左边位置小于0时,给它赋值为0,如果大于可视窗大小减去元素本身的宽度的,给它赋值为 可视窗大小减元素本身宽度的差值。

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
axios学习教程全攻略
Mar 26 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
You might like
深入PHP中的HashTable结构详解
2013/06/13 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP链表操作简单示例
2016/10/15 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
在python中bool函数的取值方法
2018/11/01 Python
python实现抖音点赞功能
2019/04/07 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python ORM编程基础示例
2020/02/02 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
总经理助理职责
2014/02/04 职场文书
刘公岛导游词
2015/02/05 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python