在js中,如何实现用鼠标拖拽DIV层 在使用用onmousedown与onmouseup函数捕捉鼠标点击,如何判断鼠标是否左击或者松开的状态呢?这两个函数具体该怎么使用呢 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 //基本思路是这样div.onmousedown = 开始绑定事件 { document.onmousemove = 你移动div的函数; document.onmouseup = 解除事件绑定;} 如下例子:<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %><%@ page import="java.util.*"%> <jsp:useBean id="nongzi" scope="request" class="beartool.Sys_CompanyFunction"/><%@ include file="../../System/ConstDefine.jsp"%><%@ include file="../../System/FunDefine.jsp"%><%@ include file="../../System/VarDefineList.jsp"%><!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link rel="stylesheet" href="../Common/Main.css"><script language="javascript" SRC="../Common/FunDefine.js"></script><link rel="stylesheet" href="../Common/Extra.css"><script language='javascript' src='../Common/graspcrmcore.js'></script><LINK href="..//Common/style.css" rel=stylesheet><SCRIPT language=javascript src="..//Common/calendar.js"></SCRIPT><style type="text/css"><!--body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}--></style><style type="text/css">#Main {position:absolute;bottom:0px;left:0px;width:100%;height:100%;overflow:auto;z-index:1;}#ToolBar {position:absolute;bottom:0px;right:0px;left:0px;width:100%;height:23px;text-align:center;z-index:2;overflow:hidden;}.STYLE1 {color: #000099}</style><style type='text/css'><!--body{font-size:12px;}a:visited{text-decoration:none;color:slategray;}a:hover{text-decoration:underline;color:slategray;}a:link{text-decoration:none;color:slategray;}--></style><script language=JScript><!--//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover='#336699',normal='#336699';//color;var index=10000;//z-index;//开始拖动;function startDrag(obj){ if(event.button==1) { //锁定标题栏; obj.setCapture(); //定义对象; var win = obj.parentNode; var sha = win.nextSibling; //记录鼠标和层位置; x0 = event.clientX; y0 = event.clientY; x1 = parseInt(win.style.left); y1 = parseInt(win.style.top); //记录颜色; normal = obj.style.backgroundColor; //改变风格; obj.style.backgroundColor = hover; win.style.borderColor = hover; obj.nextSibling.style.color = hover; sha.style.left = x1 + offx; sha.style.top = y1 + offy; moveable = true; }}//拖动;function drag(obj){ if(moveable) { var win = obj.parentNode; var sha = win.nextSibling; win.style.left = x1 + event.clientX - x0; win.style.top = y1 + event.clientY - y0; sha.style.left = parseInt(win.style.left) + offx; sha.style.top = parseInt(win.style.top) + offy; }}//停止拖动;function stopDrag(obj){ if(moveable) { var win = obj.parentNode; var sha = win.nextSibling; var msg = obj.nextSibling; win.style.borderColor = normal; obj.style.backgroundColor = normal; msg.style.color = normal; sha.style.left = obj.parentNode.style.left; sha.style.top = obj.parentNode.style.top; obj.releaseCapture(); moveable = false; }}//获得焦点;function getFocus(obj){ if(obj.style.zIndex!=index) { index = index + 2; var idx = index; obj.style.zIndex=idx; obj.nextSibling.style.zIndex=idx-1; }}//最小化;function min(obj){ var win = obj.parentNode.parentNode; var sha = win.nextSibling; var tit = obj.parentNode; var msg = tit.nextSibling; var flg = msg.style.display=="none"; if(flg) { win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; msg.style.display = "block"; obj.innerHTML = "0"; } else { win.style.height = parseInt(tit.style.height) + 2*2; sha.style.height = win.style.height; obj.innerHTML = "2"; msg.style.display = "none"; }}//创建一个对象;function xWin(id,w,h,l,t,tit,msg){ index = index+2; this.id = id; this.width = w; this.height = h; this.left = l; this.top = t; this.zIndex = index; this.title = tit; this.message = msg; this.obj = null; this.bulid = bulid; this.bulid();}//初始化;function bulid(){ var str = "" + "<div id=xMsg" + this.id + " " + "style='" + "z-index:" + this.zIndex + ";" + "width:" + this.width + ";" + "height:" + this.height + ";" + "left:" + this.left + ";" + "top:" + this.top + ";" + "background-color:" + normal + ";" + "color:" + normal + ";" + "font-size:8pt;" + "font-family:Tahoma;" + "position:absolute;" + "cursor:default;" + "border:2px solid " + normal + ";" + "' " + "onmousedown='getFocus(this)'>" + "<div " + "style='" + "background-color:" + normal + ";" + "width:" + (this.width-2*2) + ";" + "height:20;" + "color:white;" + "' " + "onmousedown='startDrag(this)' " + "onmouseup='stopDrag(this)' " + "onmousemove='drag(this)' " + "ondblclick='min(this.childNodes[1])'" + ">" + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>" + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>" + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>" + "</div>" + "<div style='" + "width:100%;" + "height:" + (this.height-20-4) + ";" + "background-color:white;" + "line-height:14px;" + "word-break:break-all;" + "padding:3px;" + "'>" + this.message + "</div>" + "</div>" + "<div id=xMsg" + this.id + "bg style='" + "width:" + this.width + ";" + "height:" + this.height + ";" + "top:" + this.top + ";" + "left:" + this.left + ";" + "z-index:" + (this.zIndex-1) + ";" + "position:absolute;" + "background-color:black;" + "filter:alpha(opacity=40);" + "'></div>"; document.body.insertAdjacentHTML("beforeEnd",str);}//显示隐藏窗口function ShowHide(id,dis){ var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis document.getElementById("xMsg"+id).style.display = bdisplay; document.getElementById("xMsg"+id+"bg").style.display = bdisplay;}//modify by haiwa @ 2005-7-14 ////--></script><script language='JScript'><!--function initialize(){ var a = new xWin("1",360,300,200,60,"公共通知","无公告"); var b = new xWin("2",360,300,600,60,"任务督办","无督办任务"); }window.onload = initialize;//--></script></head><body <%=BODY%>> <TABLE width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr > <td height="23" background="../images2/main_images/main_right_image/OK1_04_11.gif"><div align="left"><span class="STYLE1"> <font size="3" class="STYLE1">我的办公桌</font><font size="3" class="AlertText"></font></span></div></td> </tr></TABLE> <p></p> <p></p> <p></p> <table class="bodybar" width="100%" cellspacing="0" cellpadding="0" border="0"> </table> <br> <br> <br> <br><div id="ToolBar"><TABLE width="100%" height="23" border="0" cellspacing="0" cellpadding="0" align="center"> <tr > <td height="23" background="../images2/main_images/main_right_image/OK1_04_11.gif"> <span class="QueryBarTagText"><font size="3"></font></span></td> </tr></TABLE></div></body></html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>body{font-family:Verdana;font-size:11px;color:#333;}#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;} </style><script language="javascript">var move=false; function StartDrag(obj) { //设置或获取用户所按的鼠标按钮。 //设置或获取触发事件的对象。 if (event.button == 1 && event.srcElement.tagName.toUpperCase() == "DIV") { obj.setCapture(); obj.style.background="#999"; move=true; } }function Drag(obj) { if(move) { var oldwin=obj.parentNode; oldwin.style.left=event.clientX-100; oldwin.style.top=event.clientY-10; }}function StopDrag(obj) { obj.style.background="#000"; obj.releaseCapture(); move=false;} </script> </HEAD><BODY><div id="win1"><div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>设计家园<br>www.dwww.cn .</div></BODY></HTML> <!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> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <script type="text/javascript"> <!-- document.write("<style type='text/css'>.dragAble{position:relative;cursor:move;}</style>");var dragAble_ie = document.all;var dragAble_nn6 = document.getElementById && !document.all;var dragAble_isdrag = false;var dragAble_y, dragAble_x;var dragAble_oDragObj;function dragAble_moveMouse(e) { if (dragAble_isdrag) { dragAble_oDragObj.style.top = (dragAble_nn6 ? nTY + e.clientY - dragAble_y : nTY + event.clientY - dragAble_y) + "px"; dragAble_oDragObj.style.left = (dragAble_nn6 ? nTX + e.clientX - dragAble_x : nTX + event.clientX - dragAble_x) + "px"; return false; }}var dragAble_img_id;function dragAble_initDrag(e) { var oDragHandle = dragAble_nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = dragAble_nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className == "dragAble") { dragAble_isdrag = true; dragAble_oDragObj = oDragHandle; dragAble_img_id = dragAble_oDragObj.id; nTY = parseInt(dragAble_oDragObj.style.top + 0); dragAble_y = dragAble_nn6 ? e.clientY : event.clientY; nTX = parseInt(dragAble_oDragObj.style.left + 0); dragAble_x = dragAble_nn6 ? e.clientX : event.clientX; document.onmousemove = dragAble_moveMouse; return false; }}document.onmousedown = dragAble_initDrag;document.onmouseup = dragAble_dragimg;function dragAble_dragimg(e) { dragAble_isdrag = false;} //--> </script> <div style="width:30px;height:30px; background-color:red;" class="dragAble"></div> <div style="width:30px;height:30px; background-color:green;" class="dragAble"></div> <div style="width:30px;height:30px; background-color:blue;" class="dragAble"></div> </body></html> html 求助~~ js节点,初学 急 在线等待!js问题 高手请进! JavaScript正则表达式 怎样取得iframe内的html的对象值? 求助:替换URL的正则表达式 如何在Checkbox中,实现多选 前台连接数据库 Javascript替换标签中字符串的指定字符 确定窗口的疑问 想写一个通用的 JS 拖曳类,请帮帮忙 图片热点区域鼠标悬停变色的问题,救救我吧,搞了10天了,弄不出来,下礼拜就交了
div.onmousedown = 开始绑定事件 {
document.onmousemove = 你移动div的函数;
document.onmouseup = 解除事件绑定;
}
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<%@ page import="java.util.*"%>
<jsp:useBean id="nongzi" scope="request" class="beartool.Sys_CompanyFunction"/>
<%@ include file="../../System/ConstDefine.jsp"%>
<%@ include file="../../System/FunDefine.jsp"%>
<%@ include file="../../System/VarDefineList.jsp"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="../Common/Main.css">
<script language="javascript" SRC="../Common/FunDefine.js"></script>
<link rel="stylesheet" href="../Common/Extra.css">
<script language='javascript' src='../Common/graspcrmcore.js'></script>
<LINK href="..//Common/style.css" rel=stylesheet>
<SCRIPT language=javascript src="..//Common/calendar.js"></SCRIPT>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<style type="text/css">
#Main {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar {
position:absolute;
bottom:0px;
right:0px;
left:0px;
width:100%;
height:23px;
text-align:center;
z-index:2;
overflow:hidden;
}.STYLE1 {color: #000099}
</style>
<style type='text/css'>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='#336699',normal='#336699';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:8pt;"
+ "font-family:Tahoma;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id=xMsg" + this.id + "bg style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display = bdisplay;
document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}
//modify by haiwa @ 2005-7-14
//
//-->
</script><script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",360,300,200,60,"公共通知","无公告");
var b = new xWin("2",360,300,600,60,"任务督办","无督办任务");
}
window.onload = initialize;
//-->
</script></head><body <%=BODY%>>
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr >
<td height="23" background="../images2/main_images/main_right_image/OK1_04_11.gif"><div align="left"><span class="STYLE1"> <font size="3" class="STYLE1">我的办公桌</font><font size="3" class="AlertText"></font></span></div></td>
</tr>
</TABLE>
<p></p>
<p></p>
<p></p>
<table class="bodybar" width="100%" cellspacing="0" cellpadding="0" border="0"> </table>
<br>
<br>
<br>
<br>
<div id="ToolBar">
<TABLE width="100%" height="23" border="0" cellspacing="0" cellpadding="0" align="center">
<tr >
<td height="23" background="../images2/main_images/main_right_image/OK1_04_11.gif"> <span class="QueryBarTagText"><font size="3"></font></span></td>
</tr>
</TABLE></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}
</style>
<script language="javascript">
var move=false;
function StartDrag(obj) {
//设置或获取用户所按的鼠标按钮。
//设置或获取触发事件的对象。
if (event.button == 1 && event.srcElement.tagName.toUpperCase() == "DIV") {
obj.setCapture();
obj.style.background="#999";
move=true;
}
}function Drag(obj) {
if(move) {
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}}function StopDrag(obj) {
obj.style.background="#000";
obj.releaseCapture();
move=false;
} </script>
</HEAD><BODY>
<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
设计家园<br>
www.dwww.cn .
</div>
</BODY>
</HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head> <body> <script type="text/javascript">
<!--
document.write("<style type='text/css'>.dragAble{position:relative;cursor:move;}</style>");
var dragAble_ie = document.all;
var dragAble_nn6 = document.getElementById && !document.all;
var dragAble_isdrag = false;
var dragAble_y, dragAble_x;
var dragAble_oDragObj;
function dragAble_moveMouse(e) {
if (dragAble_isdrag) {
dragAble_oDragObj.style.top = (dragAble_nn6 ? nTY + e.clientY - dragAble_y : nTY + event.clientY - dragAble_y) + "px";
dragAble_oDragObj.style.left = (dragAble_nn6 ? nTX + e.clientX - dragAble_x : nTX + event.clientX - dragAble_x) + "px";
return false;
}
}
var dragAble_img_id;
function dragAble_initDrag(e) {
var oDragHandle = dragAble_nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = dragAble_nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className == "dragAble") {
dragAble_isdrag = true;
dragAble_oDragObj = oDragHandle;
dragAble_img_id = dragAble_oDragObj.id;
nTY = parseInt(dragAble_oDragObj.style.top + 0);
dragAble_y = dragAble_nn6 ? e.clientY : event.clientY;
nTX = parseInt(dragAble_oDragObj.style.left + 0);
dragAble_x = dragAble_nn6 ? e.clientX : event.clientX;
document.onmousemove = dragAble_moveMouse;
return false;
}
}
document.onmousedown = dragAble_initDrag;
document.onmouseup = dragAble_dragimg;
function dragAble_dragimg(e) {
dragAble_isdrag = false;
}
//-->
</script>
<div style="width:30px;height:30px; background-color:red;" class="dragAble"></div>
<div style="width:30px;height:30px; background-color:green;" class="dragAble"></div>
<div style="width:30px;height:30px; background-color:blue;" class="dragAble"></div>
</body>
</html>