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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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中的串行化变量和序列化对象
2006/09/05 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
浅析Python基础-流程控制
2016/03/18 Python
python语言中with as的用法使用详解
2018/02/23 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python计算两个数的百分比方法
2018/06/29 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
出纳员的岗位职责
2014/02/22 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
给老师的一封感谢信
2015/01/20 职场文书
学习保证书怎么写
2015/02/26 职场文书
文言文辞职信
2015/02/28 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
工程项目合作意向书
2015/05/08 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript