JavaScript鼠标拖拽特效及相关问题总结
#div1{width:200px;height:200px;background:red;position:absolute;}
#div2{width:200px;height:200px;background:green;position:absolute;left:300px;}
<div id="div1">原来的 普通拖拽</div>
<div id="div2">继承的 限制范围拖拽</div>
window.onload=function()
{
new Drag('div1');
new LimitDrag('div2');
}; function Drag(id)
{
this.disX=0;
this.disY=0;
var _this=this;
this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(ev)
{
_this.fnDown(ev);
return false;
};
}; Drag.prototype.fnDown=function(ev)
{
var _this=this;
var oEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function(ev)
{
_this.fnMove(ev);
}; document.onmouseup=function()
{
_this.fnUp();
};
}; Drag.prototype.fnMove=function(ev)
{
var oEvent=ev||event;
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
}; Drag.prototype.fnUp=function()
{
document.onmousemove=null;
document.onmouseup=null;
}; /*继承*/
function LimitDrag(id)
{
Drag.call(this,id);
}; for(var i in Drag.prototype)
{
LimitDrag.prototype[i]=Drag.prototype[i];
}; LimitDrag.prototype.fnMove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-this.disX;
var t=oEvent.clientY-this.disY; if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
} this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px';
};
鼠标拖拽效果最容易出现几个问题:
1、元素脱离鼠标,原因是“鼠标不离开元素基本不可能,这跟浏览器解析速度有关,浏览器解析速度又跟CPU有关”,所以元素脱离鼠标是必然的,解决办法就是采用事件委托,把事件委托到document上,而不是需要拖拽的元素上,事件本身是会冒泡的,会触发委托在document上的事件
2、元素的left和top值不能简单的设置为event.clientX或者是event.clientY,必须考虑鼠标在元素上的位置,否则元素很容易脱离鼠标
JavaScript鼠标拖拽特效及相关问题总结的更多相关文章
- javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 鼠标拖拽定位和DOM各种尺寸详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
- 完美实现鼠标拖拽事件,解决各种小bug,基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
随机推荐
- Swift方法实现回调的一种方式
记录一下: 封装了一个类,暴露出的一个方法,在外部引用时,给出回调blcok 封装类: //MARK:登录 public func loginWithToken(token:String,loginS ...
- 新手必学的java报表开发工具FineReport实用技巧
1.在制作模板时,如何将报表中的值传递到超链接网页呢? 在项目中以frame方法把F1.CPT放到项目的页面中,对F1.CPT做网络报表超链接F2.CPT,然后在F2.cpt页面中,做个超链接的网页, ...
- System V进程间通信
一)Linux环境进程间通信(一)管道及有名管道http://www.ibm.com/developerworks/cn/linux/l-ipc/part1/二)Linux环境进程间通信(二): 信号 ...
- java 24 - 10 GUI 之 四则预算的数据校验
我想要在校验的过程中,如果输入到操作数中的不是数字,则弹出提醒框: 类 JOptionPane 有助于方便地弹出要求用户提供值或向其发出通知的标准对话框 方法名 描述 showConfirmDial ...
- 如何在CTF中当搅屎棍
论如何在CTF比赛中搅屎 0×00 前言 不能搅屎的CTF不是好CTF,不能搅屎的题目不是好题目. 我很赞成phithon神的一句话,"比赛就是和他人竞争的过程,通过各种手段阻止对手拿分我觉 ...
- Android中使用Gson解析JSON数据的两种方法
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...
- Android使用Java Mail API发送邮件
最近在考虑为已经有的一个应用程序增加一个用户反馈的功能,用户可以通过反馈功能将用户的意见和建议.程序出现的问题以一种更符合用户习惯的方式反馈回来.网上也有一些实现好的反馈程序的服务,包括bug的提交. ...
- http协议(四)http状态码
一:http状态码 表示客户端http请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作 状态码的类别如下: http状态码种类繁多,大概有60多种,实际上经常使用的只有14种,下面为一 ...
- ubuntu 12.04下zmap安装
zmap介绍 https://zmap.io/ ----------------华丽的分割线---------------- zmap 1.03 的安装 Step1: sudo apt-get ins ...
- ASP.NET MVC读取XML并使用ViewData显示
看到网上一个网友问及,无法获取XML某一个节点内容.下面Insus.NET在ASP.NET MVC环境下实现它. 先把XML文件放入App_Data目录,当然你可以放在自建目录中.打开看看它有几层,几 ...