我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>

解决方案 »

  1.   

    比如你有一个<input type="hidden" id="hid">function moveFlyBar(qp){
    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;
    }
      

  2.   

    前几天没事写着玩的东西,你拿去试试是不是你要的。<html>
     <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>
      

  3.   

    cgisir(☆☆☆===http://www.hansir.cn===☆☆☆)    你好document.getElementById("hid").value="left="+qp.style.left+"&top="+qp.style.top;提交后还是没有收到新坐标