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的链式调用浅析
Dec 03 Javascript
Javascript 面试题随笔
Mar 31 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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/08/18 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
JS 自动安装exe程序
2008/11/30 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python 获取当前所在目录的方法详解
2017/08/02 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python中sys.argv函数精简概括
2018/07/08 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
开学典礼感言
2014/02/16 职场文书
婚假请假条怎么写
2014/04/10 职场文书
运动会方队口号
2014/06/07 职场文书
征兵宣传标语
2014/06/20 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
邀请函格式范文
2015/02/02 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
如何写观后感
2015/06/19 职场文书
商务信函英语问候语
2015/11/10 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
MYSQL如何查看进程和kill进程
2022/03/13 MySQL