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 写的一个简单的timer
Jul 30 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
web方式ftp
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
js select常用操作控制代码
2010/03/16 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
深入理解vue中的$set
2017/06/01 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Django小白教程之Django用户注册与登录
2016/04/22 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python笔试面试题小结
2019/09/07 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
查看keras的默认backend实现方式
2020/06/19 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
python开发制作好看的时钟效果
2022/05/02 Python