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拖拽效果的实现的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  5. js拖拽效果实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js拖拽效果详细讲解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  9. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

随机推荐

  1. MySQL如何复制一个表

    MySQL如何复制一个表 1 复制 employee 表 => employee2 () create table employee2 like employee () insert into ...

  2. matplotlib学习记录 三

    # 绘制自己和朋友在各个年龄的女友数量的折线图 from matplotlib import pyplot as plt # 让matplotlib能够显示中文 plt.rcParams['font. ...

  3. python中文件操作的其他方法

    前面介绍过Python中文件操作的一般方法,包括打开,写入,关闭.本文中介绍下python中关于文件操作的其他比较常用的一些方法. 首先创建一个文件poems: p=open('poems','r', ...

  4. 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 ...

  5. Docker容器技术的核心原理

    目录 1 前言 2 docker容器技术 2.1 隔离:Namespace 2.2 限制:Cgroup 2.3 rootfs 2.4 镜像分层 3 docker容器与虚拟机的对比 1 前言 上图是百度 ...

  6. holtek编程注意事项

    1.holtek单片机中断服务函数中函数调用里的参数不能传递地址,不然程序就会跑飞 2.holtek单片机尽量不要函数嵌套很多层,嵌套过多,会导致单片机复位

  7. 在python中对元祖进行排序

    在python里你可以对一个元组进行排序.例子是最好的说明: >>> items = [(1, 'B'), (1, 'A'), (2, 'A'), (0, 'B'), (0, 'a' ...

  8. 文件上传下载,命令之wget / curl / which / sort / uniq / cut / wc /tr /sed

    目录 命令 1.文件的上传下载 2.从外网下载文件wget 3.curl文件下载 4.查找命令which 5.字符处理命令-排序sort 6.字符处理-去重uniq 7.字符处理-截取cut 8.字符 ...

  9. Python Cdn平台文件md5验证

    第一步 先用脚本实现基本的md5验证 1.python如何实现文件的下载 方法一: 使用 urllib 模块提供的 urlretrieve() 函数.urlretrieve() 方法直接将远程数据下载 ...

  10. 遍历Request.QueryString

    Request.QueryString 返回的是 NameValueCollection, 而NameValueCollection实现了IEnumerable的GetEnumerator方法,只是G ...