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.extend 函数的详细用法
Jun 27 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Ajax常用封装库——Axios的使用
May 08 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 MVC
2014/09/10 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
详解vue-cli 接口代理配置
2017/12/13 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python regex库实例用法总结
2021/01/03 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
企业安全生产承诺书
2014/05/22 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2014年党委工作总结
2014/11/22 职场文书
寒山寺导游词
2015/02/03 职场文书
医德医风个人总结
2015/02/28 职场文书
单位综合评价意见
2015/06/05 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis