js实现鼠标拖拽div-------Day44
假设去问这样一个问题“你认为鼠标操作简单,还是键盘操作简单”,相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速度和有效性是大大的减少了,当然不可否认,会有那么一批人,操作起键盘来全然能够忽略鼠标的,但这些都应该是骨灰级别的了吧,起码我如今的层次还接触不到,仅仅能向往。
然而,当面对这么一个问题时,我突然有点纠结,由于毕竟曾经我也是那么想的,可是这次开发让我是大跌眼镜,键盘操作我在开发中,我仅仅能判定其按键是否按键,然后依据不同按键进行不同响应,而到了鼠标这里的时候,尽管就那三个键,甚至有的两个(普通的鼠标,高端鼠标其他键不算),相应的事件却是绝对不少,左键、右键、长按、双击,滚轮等等等等,那哪个简单啊,原来都不简单。
先让我们来记录下鼠标的这个应用--拖拽,它的实现结构应该有哪些呢:
1、拖拽效果的监听,这里表现出来的是左键长按并拖动鼠标;
2、拖拽结束后,鼠标按键弹起的监听,改变原始div的位置;
3、当然假设有个显示过程效果的话,最好div可以随时尾随着鼠标;
这样我们还是先附上代码:
html部分:
<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">
然后是javascript:
var zIndex=1;
//获取要移动的div对象
window.onload=function(){
var obj=document.getElementById("showZone");
var disX=disY=0;
obj.onmousedown=function(event){
var event=event||window.event;
disX=event.clientX-this.offsetLeft;
disY=event.clientY-this.offsetTop;
var move=document.createElement("div");//这个临时有点小瑕疵,不知道哪的问题,发现后会立刻改正
move["id"]="road";
move.style.left=this.currentStyle?this.currentStyle["left"]:getComputedStyle(this,null)["left"];
move.style.top=this.currentStyle?this.currentStyle["top"]:getComputedStyle(this,null)["top"];
move.style.zIndex=zIndex++;
document.body.appendChild(move);
document.onmousemove=function(event){//监听鼠标拖动
var event=event||window.event;
var nowLeft=event.clientX-disX;//这个地方是个关键,之前的disX在这里才明确是做什么用的,相对位置的活用啊
var nowTop=event.clientY-disY;
var maxL=document.documentElement.clientWidth-obj.offsetWidth;
var maxT=document.documentElement.clientHeight-obj.offsetHeight;
nowLeft<=0&&(nowLeft=0);//推断脱界了啊,只是这样写真的能够么
nowTop<=0&&(nowTop=0);
nowLeft>=maxL&&(nowLeft=maxL);
nowTop>=maxT&&(nowTop=maxT);
document.getElementById("showZone").innerHTML=nowLeft;
move.style.left=nowLeft+"px";
move.style.top=nowTop+"px";
return false;
};
document.onmouseup=function(){//监听鼠标弹起
document.onmousemove=null;
document.onmouseup=null;
obj.style.left=move.style.left;
obj.style.top=move.style.top;
obj.style.zIndex=move.style.zIndex;
document.body.removeChild(move);
obj.releaseCapture&&obj.releaseCapture();
};
this.setCapture&&this.setCapture();
return false;
};
};
这样来分析下里面的几个关键点:
1、clientX
前面我们应用了styl e.left;offsetLeft,这里又出来这么一个clientX,它的意义是鼠标相对于document的距离啊,果断记忆啊。
2、currentStyle和getComputedStyle
事实上这也算是浏览器间的差异,跟event一样,ie不具有getComputedStyle的方法,可是每一个有style属性的元素都有currentStyle的属性,意义差点儿是一样的,而getComputedStyle()有两个參数,第一个是须要计算样式的元素,后面一个则是伪元素,假设没有伪操作的话能够为空,伪元素啊,这个还没学到呢,只是这里倒没实用到,后面碰到研究吧
3、document.documentElement.clientWidth
这个临时先记住是整个文档的宽度吧
这个功能临时还有些瑕疵,只是大体功能实现了,想放松下,回头发现问题症结了再修改吧。
今天是个周六,陪媳妇看“爸爸去哪儿”,果然还是被萌化了..
js实现鼠标拖拽div-------Day44的更多相关文章
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- js实现鼠标拖拽
主要原理: 1.当鼠标按下时,记录鼠标坐标,用到的是 onmousedown: 2.当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove: 3.当鼠标松开时,清除事件,用到的是 on ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div
标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 简洁的drag效果,自由拖拽div的实现及注意点
偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mouse ...
随机推荐
- Conversion to Dalvik format failed: Unable to execute dex
最近莫名奇妙遇到“Conversion to Dalvik format failed: Unable to execute dex”错误,stackoverflow以后得到结果 把项目中classp ...
- POJ 2942 Knights of the Round Table - from lanshui_Yang
Description Being a knight is a very attractive career: searching for the Holy Grail, saving damsels ...
- 再探vim经常使用命令
最開始学习过vim,见 http://blog.csdn.net/u011848617/article/details/12837873 之后以前不了了之,当再次学习后,发现经常使用命令的掌握还 ...
- 局部权重线性回归(Locally weighted linear regression)
在线性回归中,因为对參数个数选择的问题是在问题求解之前已经确定好的,因此參数的个数不能非常好的确定,假设參数个数过少可能拟合度不好,产生欠拟合(underfitting)问题,或者參数过多,使得函数过 ...
- mysql5.1,5.5,5.6做partition时支持的函数
mysql5.1支持的partition函数(http://dev.mysql.com/doc/refman/5.1/en/partitioning-limitations-functions.htm ...
- Android 将Activity殴打jar包 对于由第三方使用 解决XML 图片 文本资源并不难过进入jar包装问题!
做项目需要打包成jar文件供第三方使用项目要求(将图片 文字资源写到到jar包中,第三方调用时,仅须要在AndroidManifest.xml配置下对应的Activity通过StartActivity ...
- JDBC与反射
什么是JDBC Java定义了一套关于连接使用数据库的规范(接口)叫做JDBC,许多数据库厂商实现了这个规范,所以我们可以通过Java提供的接口编程,使得我们更换数据库的时候不用修改原来的代码,只需要 ...
- CodeForces 52C Circular RMQ(间隔周期段树,间隔更新,间隔总和)
转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://codeforces.com/problemset/problem/52/C You are g ...
- JBOSS EAP6.2.0的下载安装、环境变量配置以及部署
JBOSS EAP6.2.0的下载安装.环境变量配置以及部署 JBoss是纯Java的EJB(企业JavaBean)server. 第一步:下载安装 1.进入官网http://www.jboss.or ...
- Google Map API V2密钥申请
之前用的都是v1,用的是MapView,好吧,仅仅能认命了.废话不再多说,開始android 的Google Maps Android API v2吧 之前參考了http://www.cnblogs. ...