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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
基于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修改时间格式的代码
2011/05/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Python扩展内置类型详解
2018/03/26 Python
Python解决八皇后问题示例
2018/04/22 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python使用建议与技巧分享(一)
2020/08/17 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
华为慧通面试题
2012/09/11 面试题
学风建设演讲稿
2014/09/12 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server