js拖拽效果的实现
1、最基础的写法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1'); oDiv.onmousedown=function (ev)
{
var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev)
{
var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
}; document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2、相比较高级的写法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
</style>
<script>
var oDiv=null;
var disX=0;
var disY=0; window.onload=function ()
{
oDiv=document.getElementById('div1'); oDiv.onmousedown=fnDown;
}; function fnDown(ev)
{
var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=fnMove;
document.onmouseup=fnUp;
} function fnMove(ev)
{
var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
} function fnUp()
{
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
3、
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
#div2 {width:200px; height:200px; background:green; position:absolute;}
</style>
<script src="Drag.js"></script>
<script src="LimitDrag.js"></script>
<script>
window.onload=function ()
{
new Drag('div1');
new LimitDrag('div2');
};
</script>
</head> <body>
<div id="div1">普通拖拽</div>
<div id="div2">限制范围</div>
</body>
</html>
Dray.js
function Drag(id)
{
var _this=this;
this.disX=0;
this.disY=0; 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;
};
LimitDrag.js
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<)
{
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';
};
js拖拽效果的实现的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- js拖拽效果的实现及原理
元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...
- js拖拽效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js拖拽效果详细讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
随机推荐
- MySQL如何复制一个表
MySQL如何复制一个表 1 复制 employee 表 => employee2 () create table employee2 like employee () insert into ...
- matplotlib学习记录 三
# 绘制自己和朋友在各个年龄的女友数量的折线图 from matplotlib import pyplot as plt # 让matplotlib能够显示中文 plt.rcParams['font. ...
- python中文件操作的其他方法
前面介绍过Python中文件操作的一般方法,包括打开,写入,关闭.本文中介绍下python中关于文件操作的其他比较常用的一些方法. 首先创建一个文件poems: p=open('poems','r', ...
- LeetCode(307) Range Sum Query - Mutable
题目 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclus ...
- Docker容器技术的核心原理
目录 1 前言 2 docker容器技术 2.1 隔离:Namespace 2.2 限制:Cgroup 2.3 rootfs 2.4 镜像分层 3 docker容器与虚拟机的对比 1 前言 上图是百度 ...
- holtek编程注意事项
1.holtek单片机中断服务函数中函数调用里的参数不能传递地址,不然程序就会跑飞 2.holtek单片机尽量不要函数嵌套很多层,嵌套过多,会导致单片机复位
- 在python中对元祖进行排序
在python里你可以对一个元组进行排序.例子是最好的说明: >>> items = [(1, 'B'), (1, 'A'), (2, 'A'), (0, 'B'), (0, 'a' ...
- 文件上传下载,命令之wget / curl / which / sort / uniq / cut / wc /tr /sed
目录 命令 1.文件的上传下载 2.从外网下载文件wget 3.curl文件下载 4.查找命令which 5.字符处理命令-排序sort 6.字符处理-去重uniq 7.字符处理-截取cut 8.字符 ...
- Python Cdn平台文件md5验证
第一步 先用脚本实现基本的md5验证 1.python如何实现文件的下载 方法一: 使用 urllib 模块提供的 urlretrieve() 函数.urlretrieve() 方法直接将远程数据下载 ...
- 遍历Request.QueryString
Request.QueryString 返回的是 NameValueCollection, 而NameValueCollection实现了IEnumerable的GetEnumerator方法,只是G ...