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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
Vuex提升学习篇
Jan 11 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
基于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中的UNICODE 编码与解码
2013/06/29 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
理解python中生成器用法
2017/12/20 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
团支部建设方案
2014/05/02 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
个人整改措施书面材料
2014/10/24 职场文书
助学感谢信范文
2015/01/21 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
初中班主任心得体会
2016/01/07 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Linux中如何安装并部署Redis
2022/04/18 Servers