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 相关文章推荐
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
ES6中的类(Class)示例详解
2020/12/09 Javascript
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python书单 不将就
2017/07/11 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
银行实习鉴定
2013/12/13 职场文书
党员组织关系介绍信
2014/02/13 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
年度考核个人总结
2015/03/06 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server