JS鼠标拖拽实例分析


Posted in Javascript onNovember 23, 2015

本文实例讲述了JS鼠标拖拽实现方法。分享给大家供大家参考,具体如下:

JS鼠标拖拽实例分析

JS鼠标拖拽实例分析

JS代码:

<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠标按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离,这个距离是不会变的,通过这个新鼠标的X坐标减去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离,这个距离是不会变的,通过这个新鼠标的Y坐标减去disY就是DIV的Top
    document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug,所以要给整个页面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
      if(oLeft<0) //当DIV的Left小于0,也就是移出左边
      {
        oLeft=0; //就把DIV的Left设置为0,就不能移出左边
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度,如果Left大于这个像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
      }
      if(oTop<0) //当DIV的To小于0,也就是移出左边
      {
        oTop=0; //就把DIV的Top设置为0,就不能移出上边
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素,如果Top大于这个像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
    };
    document.onmouseup=function() //鼠标松开时
    {
      document.onmousemove=null; //把鼠标移动清楚
      document.onmouseup=null; //把鼠标松开清楚
    };
    return false; //阻止FireFox的默认事件 bug
  };
};
</script>

完整代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;}
</style>
<script>
window.onload=function()
{
  var oDiv=document.getElementById('div');
  var disX=0;
  var disY=0;
  oDiv.onmousedown=function(ev) //鼠标按下DIV
  {
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离,这个距离是不会变的,通过这个新鼠标的X坐标减去disX就是DIV的Left
    disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离,这个距离是不会变的,通过这个新鼠标的Y坐标减去disY就是DIV的Top
    document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug,所以要给整个页面加onmousemove事件
    {
      var oEvent=ev||event;
      var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left
      var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top
      if(oLeft<0) //当DIV的Left小于0,也就是移出左边
      {
        oLeft=0; //就把DIV的Left设置为0,就不能移出左边
      }
      else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度,如果Left大于这个像素
      {
        oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素
      }
      if(oTop<0) //当DIV的To小于0,也就是移出左边
      {
        oTop=0; //就把DIV的Top设置为0,就不能移出上边
      }
      else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素,如果Top大于这个像素
      {
        oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素
      }
      oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值
      oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值
    };
    document.onmouseup=function() //鼠标松开时
    {
      document.onmousemove=null; //把鼠标移动清楚
      document.onmouseup=null; //把鼠标松开清楚
    };
    return false; //阻止FireFox的默认事件 bug
  };
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>

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

Javascript 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 #Javascript
jquery实现图片放大镜功能
Nov 23 #Javascript
jquery自定义表格样式
Nov 23 #Javascript
jquery实现表单验证简单实例演示
Nov 23 #Javascript
JavaScript与HTML的结合方法详解
Nov 23 #Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
You might like
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python读取图片任意范围区域
2019/01/23 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
局域网定义和特性
2016/01/23 面试题
Java面试题汇总
2015/12/06 面试题
烹饪自我鉴定
2014/03/01 职场文书
农村葬礼主持词
2014/03/31 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书