我JS不太熟,所以方法有点笨,请大家指教层可以移动,但是不知道怎么把移动后层的坐标写入 input hidden里面<%
set rs=conn.execute("select count(*) as qpcs from [b2c_qp] where user_un='"&session("user_un")&"'")
qpcs=clng(rs(0))
rs.close
set rs=nothing
if qpcs>0 then
set rs=conn.execute("select id,qp_l,qp_t from [b2c_qp] where user_un='"&session("user_un")&"'")
do while not rs.eof
a=a&"""qp"&rs(0)&""","
%>
<div style="cursor:move; visibility: visible; z-index:500; top:<%=rs(2)%>px;left:<%=rs(1)%>px;visibility:hidden;position:absolute;border:0px solid #AAAAAA;" id="qp<%=rs(0)%>" onDblClick="get_pos(this);" onMouseDown="catchFlyBar(this)" onMouseUp="releaseFlyBar(this)">11111111111111111111111111111111111111</div>
<input type="hidden" id="qp<%=rs(0)%>" name="qp<%=rs(0)%>" value="<%=rs(2)%>|<%=rs(2)%>" />
<%rs.movenext
loop%>
<script language=javascript>
// bigin fly bar
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;var sl = 0;
var st = 0;var qs = new Array(
<%if qpcs=1 then
response.Write(a)
elseif qpcs>1 then
response.Write(left(a,len(a)-1))
end if%>
);for(var i = 0; i < qs.length; i++){
qs[i] = document.getElementById(qs[i]);
}
//关闭层
function HideFlyBar(qp){
qp.style.visibility = "hidden";
}
//打开层
function openFlyBar(obj){
if(obj){
obj.style.pixelTop=document.body.scrollTop - st + obj.offsetTop;
obj.style.pixelLeft=document.body.scrollLeft - sl + obj.offsetLeft;
}
else{
for(var i = 0; i< qs.length; i++){
myload_flybar(qs[i]);
qs[i].style.visibility = "visible";
}
}
}
//移动层
function catchFlyBar(qp){
bIsCatchFlyBar = true;
//鼠标位置
var x=event.x + document.body.scrollLeft;
var y=event.y + document.body.scrollTop;
dragClickX = x - qp.style.pixelLeft;
dragClickY = y - qp.style.pixelTop;
qp.setCapture();
document.onmousemove = function(){moveFlyBar(qp);}
}
//释放鼠标
function releaseFlyBar(qp){
bIsCatchFlyBar = false;
qp.releaseCapture();
document.onmousemove = null;
}
//选取层
function moveFlyBar(qp){
if(bIsCatchFlyBar){
qp.style.left = event.x+document.body.scrollLeft-dragClickX;
qp.style.top = event.y+document.body.scrollTop-dragClickY;
}
}
//设置层显示的位置
function myload_flybar(obj){
//可以改为随机数
if(obj){
obj.style.pixelTop=document.body.scrollTop - st + obj.offsetTop;
obj.style.pixelLeft=document.body.scrollLeft - sl + obj.offsetLeft;
}
else{
for(var i = 0; i< qs.length; i++){
qs[i].style.pixelTop=document.body.scrollTop - st + qs[i].offsetTop;
qs[i].style.pixelLeft=document.body.scrollLeft - sl + qs[i].offsetLeft;
}
}
st = document.body.scrollTop;
sl = document.body.scrollLeft;
}
function set_left(obj, left){
if(obj.style){
obj.style.pixelLeft = left;
}
else{
obj.left = left;
}
}
function set_top(obj, top){
if(obj.style){
obj.style.pixelTop = top;
}
else{
obj.top = top;
}
}
function get_pos(obj){
var pos = new Array(0, 0);
if(obj.style){
pos[0] = obj.style.pixelTop;
pos[1] = obj.style.pixelLeft;
}
else{
pos[0] = obj.top;
pos[0] = obj.left;
}
alert("LEFT : " + pos[1] + "px, TOP : " + pos[0] + "px");
return pos;
}
window.onresize = myload_flybar;
window.onscroll = myload_flybar;
window.onload = openFlyBar;
// end fly bar
</script>
set rs=conn.execute("select count(*) as qpcs from [b2c_qp] where user_un='"&session("user_un")&"'")
qpcs=clng(rs(0))
rs.close
set rs=nothing
if qpcs>0 then
set rs=conn.execute("select id,qp_l,qp_t from [b2c_qp] where user_un='"&session("user_un")&"'")
do while not rs.eof
a=a&"""qp"&rs(0)&""","
%>
<div style="cursor:move; visibility: visible; z-index:500; top:<%=rs(2)%>px;left:<%=rs(1)%>px;visibility:hidden;position:absolute;border:0px solid #AAAAAA;" id="qp<%=rs(0)%>" onDblClick="get_pos(this);" onMouseDown="catchFlyBar(this)" onMouseUp="releaseFlyBar(this)">11111111111111111111111111111111111111</div>
<input type="hidden" id="qp<%=rs(0)%>" name="qp<%=rs(0)%>" value="<%=rs(2)%>|<%=rs(2)%>" />
<%rs.movenext
loop%>
<script language=javascript>
// bigin fly bar
var bIsCatchFlyBar = false;
var dragClickX = 0;
var dragClickY = 0;var sl = 0;
var st = 0;var qs = new Array(
<%if qpcs=1 then
response.Write(a)
elseif qpcs>1 then
response.Write(left(a,len(a)-1))
end if%>
);for(var i = 0; i < qs.length; i++){
qs[i] = document.getElementById(qs[i]);
}
//关闭层
function HideFlyBar(qp){
qp.style.visibility = "hidden";
}
//打开层
function openFlyBar(obj){
if(obj){
obj.style.pixelTop=document.body.scrollTop - st + obj.offsetTop;
obj.style.pixelLeft=document.body.scrollLeft - sl + obj.offsetLeft;
}
else{
for(var i = 0; i< qs.length; i++){
myload_flybar(qs[i]);
qs[i].style.visibility = "visible";
}
}
}
//移动层
function catchFlyBar(qp){
bIsCatchFlyBar = true;
//鼠标位置
var x=event.x + document.body.scrollLeft;
var y=event.y + document.body.scrollTop;
dragClickX = x - qp.style.pixelLeft;
dragClickY = y - qp.style.pixelTop;
qp.setCapture();
document.onmousemove = function(){moveFlyBar(qp);}
}
//释放鼠标
function releaseFlyBar(qp){
bIsCatchFlyBar = false;
qp.releaseCapture();
document.onmousemove = null;
}
//选取层
function moveFlyBar(qp){
if(bIsCatchFlyBar){
qp.style.left = event.x+document.body.scrollLeft-dragClickX;
qp.style.top = event.y+document.body.scrollTop-dragClickY;
}
}
//设置层显示的位置
function myload_flybar(obj){
//可以改为随机数
if(obj){
obj.style.pixelTop=document.body.scrollTop - st + obj.offsetTop;
obj.style.pixelLeft=document.body.scrollLeft - sl + obj.offsetLeft;
}
else{
for(var i = 0; i< qs.length; i++){
qs[i].style.pixelTop=document.body.scrollTop - st + qs[i].offsetTop;
qs[i].style.pixelLeft=document.body.scrollLeft - sl + qs[i].offsetLeft;
}
}
st = document.body.scrollTop;
sl = document.body.scrollLeft;
}
function set_left(obj, left){
if(obj.style){
obj.style.pixelLeft = left;
}
else{
obj.left = left;
}
}
function set_top(obj, top){
if(obj.style){
obj.style.pixelTop = top;
}
else{
obj.top = top;
}
}
function get_pos(obj){
var pos = new Array(0, 0);
if(obj.style){
pos[0] = obj.style.pixelTop;
pos[1] = obj.style.pixelLeft;
}
else{
pos[0] = obj.top;
pos[0] = obj.left;
}
alert("LEFT : " + pos[1] + "px, TOP : " + pos[0] + "px");
return pos;
}
window.onresize = myload_flybar;
window.onscroll = myload_flybar;
window.onload = openFlyBar;
// end fly bar
</script>
if(bIsCatchFlyBar){
qp.style.left = event.x+document.body.scrollLeft-dragClickX;
qp.style.top = event.y+document.body.scrollTop-dragClickY;//用&或者其他都可以,比如"|||"这样方便取值吧
document.getElementById("hid").value="left="+qp.style.left+"&top="+qp.style.top;
}
<head>
<title>DropLayer2</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
div
{
border-right: lightgrey thin solid;
border-top: lightgrey thin solid;
font-weight: bold;
z-index: 2;
text-transform: capitalize;
border-left: lightgrey thin solid;
color: white;
border-bottom: lightgrey thin solid;
background-color: dimgray;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
<div onMouseOver="fmove()" id="fdiv" style=" background-color:#999999;width:100; height:50;">
</div>
<script language="javascript">
<!--
var obj,obj2; //引发事件对象
var rootNode; //控制对象根节点 var IsDrag=false; //是否抓起
var NullDiv; //空临时层
var x,y; //鼠标与控件的相对坐标
window.onload = Prepare; //窗体加载时委托到Prepare
function Offset(obj) {
if(typeof obj=='string')
obj=document.getElementById(obj);
return {
top : obj.offsetTop,
left : obj.offsetLeft,
width : obj.clientWidth,
height : obj.clientHeight
}
}
function Prepare()
{
//生成临时层,并设置其属性
// NullDiv = document.createElement("div");
//获得控制对象的根节点元素
// rootNode = document.getElementById("parentDiv");
document.onmousemove=move; //当鼠标在文档上移动时事件委托到MoveIt
document.onmousedown=down; //当鼠标按下时事件委托到Drag
document.onmouseup=up; //当鼠标释放台起时事件委托到Release
}
var $obj;
var x,y;
var w;
var flag=false;
var $flag=false;
var xf=false;
var yf=false;
function down(){
xf=false;
yf=false;
$obj=event.srcElement;
$obj.style.position="absolute";
x=event.x-$obj.style.posLeft;
y=event.y-$obj.style.posTop;
var offset=Offset($obj);
w=$obj.style.posLeft + offset.width;
if((event.x>$obj.style.posLeft+5 && event.x<$obj.style.posLeft+offset.width-5) && (event.y>$obj.style.posTop+5 && event.y<$obj.style.posTop+offset.height-5))
flag=true;
else
$flag=true;
}
function move(){
if(flag){
$obj.style.posTop=event.y-y;
$obj.style.posLeft=event.x-x;
var offset=Offset($obj);
var str=event.x+"\t"+($obj.style.posLeft+5)+"\n";
str += event.x+"\t"+($obj.style.posLeft+offset.width-5)+"\n";
str += event.y+"\t"+($obj.style.posTop+5)+"\n";
str += event.y+"\t"+($obj.style.posTop+offset.height-5);
dd.innerHTML=str;
}
if($flag){
var offset=Offset($obj);
if(event.x<$obj.style.posLeft+5 || event.x>$obj.style.posLeft+offset.width-5)xf=true;
if(event.y<$obj.style.posTop+5 || event.y>$obj.style.posTop+offset.height-5)yf=true;
if(xf && yf)
{
$obj.style.width = event.x - offset.left;
$obj.style.height = event.y - offset.top;
}else
{
if(xf){
if(event.x<$obj.style.posLeft+5)
{
$obj.style.posLeft = event.x - x;
$obj.style.width = w - event.x + x;
}else
$obj.style.width = event.x - offset.left;
}
if(yf)
$obj.style.height = event.y - offset.top;
}
}
}
function up(){
$flag=false;
flag=false;
}
function fmove(){
$obj=event.srcElement;
var offset=Offset($obj);
var str=event.x+"\t"+($obj.style.posLeft+5)+"\n";
str += event.x+"\t"+($obj.style.posLeft+offset.width-5)+"\n";
str += event.y+"\t"+($obj.style.posTop+5)+"\n";
str += event.y+"\t"+($obj.style.posTop+offset.height-5);
dd.innerHTML=str;
var x=event.x;
var y=event.y;
var ol=$obj.style.posLeft;
var ot=$obj.style.posTop;
var offset=Offset($obj);
if((x<ol+5 || x>ol+offset.width-5) && (y>ot+5 && y<ot+offset.height-5))
$obj.style.cursor="w-resize";
if((y<ot+5 || x>ot+offset.height-5) && (x>ol+5 && x<ol+offset.width-5))
$obj.style.cursor="n-resize";
}
//-->
</script>
<div style="position:absolute;top:300; left:200; width:100; cursor:n-resize" id="dd"></div>
</body>
</html>