javascript实现完美拖拽效果


Posted in Javascript onMay 06, 2015

拖拽的原理

1.获取距离(鼠标的位置-odiv的外边距)

2.理解什么时候用onmousemove事件

3.判断是否过界

html代码:

<div id="div1"></div>

css代码:

#div1{width:100px;height:100px;background:red;position:absolute}

javascript代码:

window.onload=function(){
  var oDiv=document.getElementById("div1");
  var x=0;
  var y=0;
  oDiv.onmousedown=function(ev){
    var oEvent=ev||event;
    //鼠标的横坐标减去div的offsetLeft
    x=oEvent.clientX-oDiv.offsetLeft;
    //鼠标的纵坐标减去div的offsetTop
    y=oEvent.clientY-oDiv.offsetTop; 
     
    document.onmousemove=function(ev){
      var oEvent=ev||event;   
      var left=oEvent.clientX-x;
      var right=oEvent.clientY-y;
      //判断左边是否过界
      if(left<0){
        left=0;
      }
      //判断右边是否过界
      else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
        left=document.documentElement.clientWidth-oDiv.offsetWidth;
      }
      //判断上边是否过界
      if(right<0){
        right=0;
      }
      //判断下边是否过界
      else if(right>document.documentElenment.clientHeight){
        right=document.documentElenment.clientHeight-oDiv.offsetHeight;
      }
      oDiv.style.left=left+"px";
      oDiv.style.top=right+"px";
    }   
    document.onmouseup=function(){
      //清空document的事件
      document.onmousemove=null;
      document.onmouseup=null;
    }
    //解决低版本火狐bug,干掉系统默认
    return false;
  }
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
AngularJs表单验证实例详解
May 30 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
vue实现图片上传功能
May 28 Javascript
javascript实现评分功能
Jun 24 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 #Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Python最基本的输入输出详解
2015/04/25 Python
python实现bucket排序算法实例分析
2015/05/04 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python3.5安装python3-tk详解
2019/04/26 Python
python输出决策树图形的例子
2019/08/09 Python
python小白切忌乱用表达式
2020/05/29 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
学前教育专业毕业生自荐信
2013/10/03 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
房地产项目建议书
2014/03/12 职场文书
导游个人求职信
2014/04/25 职场文书
干部考察材料范文
2014/12/24 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
Python实现为PDF去除水印的示例代码
2022/04/03 Python