js拖拽div移动
js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置
如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意！
第一种方法如下：代码如下：
html代码如下：
<div id="message_box" style="position:absolute; background-color:#FFFFFF;border:solid 1px #000;width:420px;left:40%;top:20%;filter:alpha(opacity=100);opacity:1;visibility:hidden;z-index:1000;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
<tr id="titleBar" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;">
<th align="left" unselectable="on" ><span>详细信息</span><span onClick="closeProc();" style="float: right;cursor: hand;"> × </span></th>
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top" unselectable="on">
<td>
<table border='1px;' style="text-align: left;margin-top: 20px;font-size: 13px;">
<tr><td rowspan='3' class="js_head" style="width: 120px;"><img src="/static/images/face.jpg" style="width: 100px;height: 100px;margin-left: 10px;"/></td><td class="js_nickName"></td></tr>
<tr><td class="js_phone"></td></tr>
<tr><td>-$^_^$-</td></tr>
<tr style="height: 1px;"><td colspan='2'><hr style='color: red;'/></td></tr>
<tr><td colspan='2' class="js_mainBusiness"></td></tr>
<tr style="height: 1px;"><td colspan='2'><hr style='color: red;'/></td></tr>
<tr><td colspan='2' style="text-align: center"><input type="button" class="js_createRoomSendMessage" value="发消息" style="width: 70px;height: 35px;"></td></tr>
</table>
</td> <!---->
</tr>
</table>
</div>
js代码如下：
function DragDivDrag(titleBarID, message_boxID, obj) {
var Common = {
getEvent: function () {//ie/ff
if (document.all) {
return window.event;
}
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
},
getMousePos: function (ev) {
if (!ev) {
ev = this.getEvent();
}
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
if (document.documentElement && document.documentElement.scrollTop) {
return {
x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
else if (document.body) {
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
},
getItself: function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
},
getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight },
isIE: document.all ? true : false,
setOuterHtml: function (obj, html) {
var Objrange = document.createRange();
obj.innerHTML = html;
Objrange.selectNodeContents(obj);
var frag = Objrange.extractContents();
if (obj.parentNode != null) {
obj.parentNode.insertBefore(frag, obj);
obj.parentNode.removeChild(obj);
}
}
}
///------------------------------------------------------------------------------------------------------
var Class = {
create: function () {
return function () {
this.init.apply(this, arguments);
}
}
}
var Drag = Class.create();
Drag.prototype = {
init: function (titleBar, message_box, Options) {
//设置点击是否透明，默认不透明
titleBar = Common.getItself(titleBar);
message_box = Common.getItself(message_box);
this.dragArea = { maxLeft: 0, maxRight: Common.getViewportSize.w - message_box.offsetWidth - 2, maxTop: 0, maxBottom: Common.getViewportSize.h - message_box.offsetHeight - 2 };
if (Options) {
this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
this.keepOrigin = Options.keepOrigin ? ((Options.keepOrigin == true || Options.keepOrigin == false) ? Options.keepOrigin : false) : false;
if (this.keepOrigin) {
this.opacity = 50;
}
if (Options.area) {
if (Options.area.left && !isNaN(parseInt(Options.area.left))) {
this.dragArea.maxLeft = Options.area.left
}
;
if (Options.area.right && !isNaN(parseInt(Options.area.right))) {
this.dragArea.maxRight = Options.area.right
}
;
if (Options.area.top && !isNaN(parseInt(Options.area.top))) {
this.dragArea.maxTop = Options.area.top
}
;
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) {
this.dragArea.maxBottom = Options.area.bottom
}
;
}
}
else {
this.opacity = 100, this.keepOrigin = false;
}
this.originDragDiv = null;
this.tmpX = 0;
this.tmpY = 0;
this.moveable = false;
var dragObj = this;
titleBar.onmousedown = function (e) {
var ev = e || window.event || Common.getEvent();
//只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
}
else {
return false;
}
if (dragObj.keepOrigin) {
dragObj.originDragDiv = document.createElement("div");
dragObj.originDragDiv.style.cssText = message_box.style.cssText;
dragObj.originDragDiv.style.width = message_box.offsetWidth;
dragObj.originDragDiv.style.height = message_box.offsetHeight;
dragObj.originDragDiv.innerHTML = message_box.innerHTML;
message_box.parentNode.appendChild(dragObj.originDragDiv);
}
dragObj.moveable = true;
message_box.style.zIndex = dragObj.GetZindex() + 1;
var downPos = Common.getMousePos(ev);
dragObj.tmpX = downPos.x - message_box.offsetLeft;
dragObj.tmpY = downPos.y - message_box.offsetTop;
titleBar.style.cursor = "move";
if (Common.isIE) {
message_box.setCapture();
} else {
window.captureEvents(Event.MOUSEMOVE);
}
dragObj.SetOpacity(message_box, dragObj.opacity);
//FireFox 去除容器内拖拽图片问题
if (ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}
document.onmousemove = function (e) {
if (dragObj.moveable) {
var ev = e || window.event || Common.getEvent();
//IE 去除容器内拖拽图片问题
if (document.all) //IE
{
ev.returnValue = false;
}
var movePos = Common.getMousePos(ev);
message_box.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";
message_box.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";
}
};
document.onmouseup = function () {
if (dragObj.keepOrigin) {
if (Common.isIE) {
dragObj.originDragDiv.outerHTML = "";
}
else {
Common.setOuterHtml(dragObj.originDragDiv, "");
}
}
if (dragObj.moveable) {
if (Common.isIE) {
message_box.releaseCapture();
}
else {
window.releaseEvents(Event.MOUSEMOVE);
}
dragObj.SetOpacity(message_box, 100);
titleBar.style.cursor = "default";
dragObj.moveable = false;
dragObj.tmpX = 0;
dragObj.tmpY = 0;
}
};
}
},
SetOpacity: function (message_box, n) {
if (Common.isIE) {
message_box.filters.alpha.opacity = n;
}
else {
message_box.style.opacity = n / 100;
}
},
GetZindex: function () {
var maxZindex = 0;
var divs = document.getElementsByTagName("div");
for (z = 0; z < divs.length; z++) {
maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
}
return maxZindex;
}
}
new Drag(titleBarID, message_boxID, obj); //, area: { left: 50, right: 500, top: 100, bottom: 400}
}
使用的时候，直接调用
DragDivDrag("titleBar", "message_box", { opacity: 100, keepOrigin: true });
代码中
new Drag(titleBarID, message_boxID, obj); //, area: { left: 50, right: 500, top: 100, bottom: 400}
area参数代表div可移动的范围
仅供参考，如有疑问，请留言...
如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必须注意
第二中拖动的实现代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>自由拖动的DIV层方块</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #draggable{ background-color:green; font-size:9pt; padding:30px; color:white; width:360px; height:224px; position:absolute; } </style> <script type="text/javascript"> var rDrag = { o:null, init:function(o){ o.onmousedown = this.start; }, start:function(e){ var o; e = rDrag.fixEvent(e); e.preventDefault && e.preventDefault(); rDrag.o = o = this; o.x = e.clientX - rDrag.o.offsetLeft; o.y = e.clientY - rDrag.o.offsetTop; document.onmousemove = rDrag.move; document.onmouseup = rDrag.end; }, move:function(e){ e = rDrag.fixEvent(e); var oLeft,oTop; oLeft = e.clientX - rDrag.o.x; oTop = e.clientY - rDrag.o.y; rDrag.o.style.left = oLeft + 'px'; rDrag.o.style.top = oTop + 'px'; }, end:function(e){ e = rDrag.fixEvent(e); rDrag.o = document.onmousemove = document.onmouseup = null; }, fixEvent: function(e){ if (!e) { e = window.event; e.target = e.srcElement; e.layerX = e.offsetX; e.layerY = e.offsetY; } return e; } } window.onload = function(){ var obj = document.getElementById('draggable'); rDrag.init(obj); } </script> </head> <body> <div id="draggable">这个可以拖动！</a></div> </body> </html>
- 顶
- 1
- 踩
- 0
- 上一篇图形数据库之---neo4j(非关系型数据库)
- 下一篇关于js动态生成元素，注册(绑定)的事件失效的解决(on)
- 猜你在找
查看评论* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
个人资料
qxs965266509
- 访问：469402次
- 积分：7215
- 等级：
- 排名：第1710名
- 原创：241篇
- 转载：1篇
- 译文：0篇
- 评论：235条
技术交流群
Android 技术交流
群： 92394740
加入的情况，请注明从csdn博客看到的。
QQ在线
你可以的哟...
博客专栏
Android 热修复 文章：5篇
阅读：14946
深入浅出之Struts2 文章：9篇
阅读：13923文章分类
- 网页制作(6)
- Java编程(73)
- 数据库(8)
- 个人日志(2)
- android(40)
- Java Web开发(47)
- 面试(14)
- Jsp(29)
- Hibernate(10)
- Struts2(9)
- JavaScript(26)
- Ajax(10)
- jQuery(5)
- oracle(7)
- Spring(6)
- Nodejs(11)
- Neo4j(1)
- Json(1)
- Asp(1)
- 开源框架(6)
文章存档
- 2016年03月(1)
- 2016年01月(1)
- 2015年12月(1)
- 2015年11月(4)
- 2015年07月(4)
- 2015年04月(2)
- 2015年01月(3)
- 2014年07月(1)
- 2014年03月(1)
- 2014年02月(1)
- 2013年12月(1)
- 2013年11月(5)
- 2013年10月(3)
- 2013年09月(11)
- 2013年08月(9)
- 2013年07月(5)
- 2013年06月(14)
- 2013年05月(16)
- 2013年04月(15)
- 2013年03月(19)
- 2013年02月(1)
- 2012年12月(13)
- 2012年11月(28)
- 2012年10月(16)
- 2012年09月(20)
- 2012年07月(5)
- 2012年06月(4)
- 2012年05月(11)
- 2012年04月(10)
- 2012年03月(6)
- 2012年02月(6)
- 2011年12月(1)
- 2011年11月(2)
- 2011年10月(2)
阅读排行
- 各种快递查询--Api接口(46176)
- HTML5 LocalStorage本地存储和sessionStorage使用(17638)
- HTTP协议---HTTP请求中的常用请求字段和HTTP的响应状态码及响应头(11510)
- 我的命运,我规划 -------大学生职业生涯规划_短期规划(8674)
- 数据库的查询与视图(8172)
- 城市公交查询--Api接口(7612)
- 火车车次查询-余票查询--Api接口(7463)
- js中的referrer使用,返回上一页(7142)
- Java乔晓松-android中上传图片到服务器Tomcat(Struts2)(6683)
- Alibaba-AndFix Bug热修复框架原理及源码解析(6679)
评论排行
- 我的命运,我规划 -------大学生职业生涯规划_短期规划(58)
- Java乔晓松-android使用GridView布局的电子相册&服务器获取图片(19)
- Alibaba-AndFix Bug热修复框架的使用(17)
- 各种快递查询--Api接口(12)
- 火车车次查询-余票查询--Api接口(11)
- Alibaba-Dexposed框架在线热补丁修复的使用(10)
- Android-实现ListView左右滑动删除和编辑(仿微信电话本)(10)
- Alibaba-AndFix Bug热修复框架原理及源码解析(7)
- js数组的用法以及数组根据下标(数值或字符)移除元素(7)
- 数据库基本命令的总结(6)
最新评论
- Alibaba-AndFix Bug热修复框架的使用
c654123h: 点击加载apatch 的时候出现E/AndroidRuntime(5986): java.lang....
- android-继承BaseAdapter--自定义适配器，getView执行多次的解决方法
qq_25280063: 我就笑笑，居然还有人顶
- 各种快递查询--Api接口
baidu_34239538: 极速数据www.jisuapi.com 整体上在所有接口平台中还是可以的
- Alibaba-AndFix Bug热修复框架原理及源码解析
gzbo930: inBlackList() 亮了~哈哈~
- Alibaba-AndFix Bug热修复框架的使用
leifengpeng: 奇怪 竟然没效果
- Alibaba-AndFix Bug热修复框架的使用
qxs965266509: @ImTryCatchException:进博客左边的群里讨论你的问题吧
- Alibaba-AndFix Bug热修复框架的使用
ImTryCatchException: @qxs965266509: 点击加载apatch 的时候出现的。。。 晕死 03-10 21:...
- Alibaba-AndFix Bug热修复框架的使用
ImTryCatchException: @qxs965266509: 你好 用你提供的命令 回车 之后出现下面这 些东西并没有出现差异文件。...
- Alibaba-AndFix Bug热修复框架的使用
qxs965266509: @ImTryCatchException:https://github.com/alibaba/An...
- Alibaba-Dexposed框架在线热补丁修复的使用
qxs965266509: @ImTryCatchException:文件找不到，肯定是的补丁文件路径不对咯PatchResul...