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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
javascript一点特殊用法
May 28 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 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 页面执行时间计算代码
2008/12/04 PHP
PHP的基本常识小结
2013/07/05 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
angular4自定义组件详解
2017/09/28 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python基础教程之字典操作详解
2014/03/25 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
《听鱼说话》教学反思
2014/02/15 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
2014年保卫工作总结
2014/12/05 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
python基础之模块的导入
2021/10/24 Python
python中取整数的几种方法
2021/11/07 Python