php爱好者创建ＤＩＶ并可以拖动，改变大小的写法！有BUG,请高手指正!

gimao

UID: 15672
帖子: 1
积分: 3
在线时间: 1小时
注册时间: 2007-04-17
最后登录: 2007-04-19

1^# gimao 发表于2007-04-17

php爱好者创建ＤＩＶ并可以拖动，改变大小的写法！有BUG,请高手指正!

<html >
<head runat="server">
<title>无标题页</title>
<script language="javascript">

var Pane = new Array();//点数数组
var CdMax=100;//总的点数限制
var obj_moing=false;
var obj_resize="";
var selectedObj;

function setZIndex(obj, zOrder)
{
obj.zIndex = zOrder
}
function setSelectedElem(evt)
{

var imgObj = window.event.srcElement
if(imgObj.tagName.indexOf("DIV")!=-1)
{
      selectedObj = imgObj
setZIndex(selectedObj,100)
return
   }else if (imgObj.parentElement.tagName.indexOf("DIV") != -1) {
selectedObj = imgObj.parentElement
setZIndex(selectedObj,100)
return
}
selectedObj = null
return
}

  var offsetX, offsetY
  function Selectid(obj)
  {

  }
  function mousedown(obj)
  {
//  setSelectedElem(event);
   if(obj_resize!="") return ;
   if(obj_moing) return ;
   if(!obj) return ;
//如果正在拖动,那么返回

curX=event.clientX+document.documentElement.scrollLeft;
curY=event.clientY+document.documentElement.scrollTop;
moveallwidth=parseInt(document.getElementById(obj.id+"").offsetLeft)+parseInt(document.getElementById(obj.id+"").offsetWidth);
moveallheight=parseInt(document.getElementById(obj.id+"").offsetTop)+parseInt(document.getElementById(obj.id+"").offsetHeight);
moveleft=parseInt(moveallwidth)-parseInt(curX);
movetop=parseInt(moveallheight)-parseInt(curY);

if (Math.abs(moveleft)<=2)
{
if (Math.abs(moveleft)<=2  && Math.abs(movetop)<=2)
{
obj_resize="right_bottom";
}
else
{
obj_resize="right_right";
}
}
else if (Math.abs(movetop)<=2)
{
obj_resize="bottom_bottom";
}
else
{
      obj_resize ="";
obj_moing = true; //设正在拖动
}
offsetX = window.event.offsetX
offsetY = window.event.offsetY
return false;
  }

  function dragIt(obj)
  {
   //setSelectedElem(event);
   if (!obj) return ;

   if(obj_moing==false && obj_resize=="") //如果不是正在拖动,那么返回
   {
curX=event.clientX+document.documentElement.scrollLeft;
curY=event.clientY+document.documentElement.scrollTop;
moveallwidth=parseInt(document.getElementById(obj.id+"").offsetLeft)+parseInt(document.getElementById(obj.id+"").offsetWidth);
moveallheight=parseInt(document.getElementById(obj.id+"").offsetTop)+parseInt(document.getElementById(obj.id+"").offsetHeight);
moveleft=parseInt(moveallwidth)-parseInt(curX);
movetop=parseInt(moveallheight)-parseInt(curY);
if (Math.abs(moveleft)<=2)
{
if (Math.abs(moveleft)<=2  && Math.abs(movetop)<=2)
{

obj.style.cursor="se-resize";
}
else
{
obj.style.cursor="w-resize";
}
}
else if (Math.abs(movetop)<=2)
{
obj.style.cursor="n-resize";
}
else
{
obj.style.cursor="default";
     }
}else
{
     if (obj_moing==true)
{
      window.status="e移动";
obj.style.pixelLeft = event.clientX-offsetX; //设定移动后的位置
obj.style.pixelTop = event.clientY-offsetX; //设定移动后的位置
}
else
{
         window.status=obj_resize;
   switch(obj_resize)
{
case "right_right":
   obj.style.width = (event.clientX-obj.offsetLeft)+"px";
      var tmpimg = document.getElementById("IMG"+obj.id+"");
                  if(tmpimg!=null)
                  {
                     tmpimg.style.width=(event.clientX-obj.offsetLeft-1)+"px";
                  }
   break;
case "right_bottom":
   obj.style.width = (event.clientX-obj.offsetLeft)+"px";
   obj.style.height = (event.clientY-obj.offsetTop)+"px";
      var tmpimg = document.getElementById("IMG"+obj.id+"");
   if(tmpimg!=null)
   {
      tmpimg.style.width=(event.clientX-obj.offsetLeft-1)+"px";
            tmpimg.style.height = (event.clientY-obj.offsetTop-1)+"px";
         }
      break;
case "bottom_bottom":
         obj.style.height = (event.clientY-obj.offsetTop)+"px";
         var tmpimg = document.getElementById("IMG"+obj.id+"");
         if(tmpimg!=null)
         {
               tmpimg.style.height = (event.clientY-obj.offsetTop-1)+"px";
            }
      break;
default:
break;
}
}
}
  }
  function release(obj)
  {
obj_moing = false; //设不是正在拖动
obj_resize="";
selectedObj = null;
  }
  function init()
  {

//document.onmousemove = dragIt;
//document.onmouseup = release;
//document.onmousedown = mousedown;
  }

  //创建点
function ShowMenu()
{

var x, y, w, h, ox, oy;

x = event.clientX;
y = event.clientY;

x = x + document.body.scrollLeft;
y = y + document.body.scrollTop;
var zbx = new Array();
zbx[0]=x;
zbx[1]=y;
var CdInfo =window.showModalDialog("SetCdInfo.aspx",zbx,'dialogWidth:350px;dialogLeft:'+x+';dialogTop:'+y+';dialogHeight:140px;scroll:0;help:0;status:no;');
//alert(CdInfo);
if(CdInfo!=undefined)
{
var pantmp = document.createElement("DIV");
pantmp.style.position = "absolute";
var tmpid;
if(Pane.length==0)
{
   tmpid="0";
}
else
{
tmpid= (Pane.length+1)+"";
}
pantmp.id = "DIV"+tmpid+"";
pantmp.style.posLeft =CdInfo[0];
pantmp.style.posTop = CdInfo[1];
pantmp.style.background= "red";
pantmp.style.width=CdInfo[2];
pantmp.style.height=CdInfo[3];
pantmp.ondblclick =SetCdInfo;
pantmp.onmousemove=new Function("dragIt(this)");
pantmp.onmouseup=new Function("release(this)");
pantmp.onmousedown=new Function("mousedown(this)");
pantmp.style.visibility = "visible";
// pantmp.innerHTML="<span></span>";
pantmp.innerHTML="<IMG id=IMG"+pantmp.id+" src=../atupload/4200703050245375993186.jpg width="+CdInfo[2]+" height="+CdInfo[3]+">";
document.body.appendChild(pantmp);
if(Pane.length==0)
{
　　Pane[0] = pantmp;
}else
{
   　Pane[Pane.length] = pantmp;
}
}
return false;
}

function SetCdInfo()
{
var CdInfo =window.showModalDialog("UpCdInfo.aspx",this,'dialogWidth:350px;dialogLeft:'+this.style.posLeft+';dialogTop:'+this.style.posTop+';dialogHeight:140px;scroll:0;help:0;status:no;');
this.style.posLeft =CdInfo[0];
this.style.posTop = CdInfo[1];
this.style.background= "red";
this.style.width=CdInfo[2];
this.style.height=CdInfo[3];
}
function ExitFun()
  {
var rv = window.confirm( "是否保存本次所作的修改。" );
if( rv )
{
      var oBao = new ActiveXObject("Microsoft.XMLHTTP");
      var SaveString="";
      for(var i=0;i<Pane.length;i++)
      {
      SaveString=SaveString+Pane.id+","+Pane.style.posLeft+","+Pane.style.posTop+","+Pane.style.width+","+Pane.style.height+",$";
      }
oBao.open("POST","SaveData.aspx?SaveString=" + SaveString,false);
      oBao.send();
      var strResult = new String( unescape(oBao.responseText) );
      if( strResult !="1" )
      {
        window.alert( strResult );
        window.alert( "数据保存失败。" );

      }
      else
      {
         window.alert( "成功保存图形数据信息" );
        window.close();
      }
}
}

   document.oncontextmenu = ShowMenu
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">

</style>
</head>
<body onunload="ExitFun()" onload="init();">
<form id="form1" runat="server"><img src="" />
</form>
</body>
</html>

仿：
http://www.phpfans.net/bbs/mytest/winvista.html
实现，请斑竹帮忙看看