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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
js实现滑动进度条效果
Aug 21 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
我的论坛源代码(四)
2006/10/09 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
json跟xml的对比分析
2008/06/10 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
《夜晚的实验》教学反思
2014/02/19 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL