郁闷了一个星期的问题。喜欢挑战高难度的朋友来看看啊。

补充：如果table不好实现，换成拖动一个div也行...只要能实现自己布局页面功能就可以了

huo789(四火)
但是不能使用编辑器之类的东西。只能是自己写代码实现.

我的意思是说你可以下载一个javascript版的编辑器，然后把实现这段功能的代码copy下来

fantiny(乐于助人的菜鸟回归)
你太流了。一下就OK了。谢谢你。不过我还有个问题。希望你能帮帮我。
问题是：右键点击标题部分，出现”编辑“选项。点击”编辑“后，让这个标题可以修改。

//移动的图层，拖动
1.<span style='position:absolute;width:200;height:200;background:red'
onmousedown=MouseDown(this) onmousemove=MouseMove()
onmouseup=MouseUp()>meizz</span>
<script language=javascript>
var Obj;
function MouseDown(obj)
{
  Obj=obj;
  Obj.setCapture();
  Obj.l=event.x-Obj.style.pixelLeft;
  Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
  if(Obj!=null)
  {
    Obj.style.left = event.x-Obj.l;
    Obj.style.top = event.y-Obj.t;
  }
}
function MouseUp()
{
  if(Obj!=null)
  {
    Obj.releaseCapture();
    Obj=null;
  }
}
</script>
2.
<div id="myDiv" src="logo.gif" ondrag="doDrag();"
onmouseover="this.style.cursor='hand'"
style="position:absolute;left=100;top=100;" onmousedown="doMouseDown();">
<a href="#" onclick="return false"><h1>wlecome</h1></a>
</div>
<script language="JavaScript" type="text/javascript">
var orgMouseX;
var orgMouseY;
var orgObjX;
var orgObjY;
function doDrag()
{
var myObject=document.all.myDiv;
var x=event.clientX;
var y=event.clientY;
myObject.style.left=x-(orgMouseX-orgObjX);
myObject.style.top=y-(orgMouseY-orgObjY);

}
function doMouseDown()
{
orgMouseX=event.clientX;
orgMouseY=event.clientY;
orgObjX=parseInt(document.all.myDiv.style.left);
orgObjY=parseInt(document.all.myDiv.style.top);
}
</script>

还有个问题就是，当我随意布局后，点击一个BUTTON把当前的布局格式保存下来，当我下次进入的时候，就是我上次布局的格式。

代码不是我写的
论坛上面copy的而已
不过这个代码有bug
楼主自己用的时候多测试一下

这里也有一个：
--------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.dragTable
{
background-color:white;
position:relative;
}.dragTableHeader
{
cursor:move;
background-color:#cccccc;
}</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var dragTableHeader=null;
var tipDiv=null;
var allDragTables=new Array();function MouseDownToMove(obj){
if((event.button&1)==0) return;
sourceObj=obj.offsetParent;
sourceObj.style.zIndex=10;
sourceObj.mouseDownY=event.clientY;
sourceObj.mouseDownX=event.clientX;
beginMoving=true;
dragTableHeader=obj;
dragTableHeader.setCapture();
}
function MouseMoveToMove(obj){
if(!beginMoving) return;
sourceObj.style.top = (event.clientY-sourceObj.mouseDownY);
sourceObj.style.left = (event.clientX-sourceObj.mouseDownX);
setTipDivPosition();
}
function MouseUpToMove(obj){
if(!beginMoving) return;
dragTableHeader.releaseCapture();
sourceObj.style.top=0;
sourceObj.style.left=0;
sourceObj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj){
if (tipDiv==null) {
tipDiv=document.createElement("<div style='position:absolute;z-index:10;line-height:2px;height:2px;color:red;'>");
tipDiv.innerText="------";
}
obj.insertAdjacentElement("beforeBegin",tipDiv);
if(obj==sourceObj) return;
}
function swapFun(){
if(sourceObj!=null) tipDiv.insertAdjacentElement("afterEnd",sourceObj);
sourceObj=null;
}
function setTipDivPosition(){
var allTables=document.getElementsByTagName("table");
for(var i=0;i<allTables.length;i++) {
if(allTables[i]==sourceObj) continue;
if(allTables[i].className=="dragTable" && isMouseInBox(allTables[i])){
allTables[i].insertAdjacentElement("beforeBegin",tipDiv);
return;
}
}
sourceObj.insertAdjacentElement("beforeBegin",tipDiv);
}
function isMouseInBox(obj){
var point1=new Array(event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop);
var point2=getObjPosition(obj);
return( (point1[0]>=point2[0]) && point1[1]>=point2[1] && point1[0]-point2[0]<=obj.offsetWidth && point1[1]-point2[1]<=obj.offsetHeight )
}
function getObjPosition(obj){
var point=new Array(0,0);
while(obj!=document.body){
point[0]+=obj.offsetLeft;
point[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return point;
}</script>
<script defer>
document.onmousemove=MouseMoveToMove;
document.onmouseup=MouseUpToMove;
</script>
</head><body><table border="1" width="100%" height="58">
  <tr>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------1">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格1">表格1</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格2">表格2</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------2">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格3">表格3</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格4">表格4</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
    </td>
  </tr>
</table>
<table border="1" width="100%" height="58">
  <tr>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------3">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格5">表格5</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格6">表格6</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间-------4">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格7">表格7</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格8">表格8</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
    </td>
  </tr>
</table><input type=button value="保存示例" onclick="saveFun()">
</body>
</html>
<script>
function saveFun()
{
var tableNameObjs=document.getElementsByName("tableName");
var tempStr="";
for(var i=0;i<tableNameObjs.length;i++)
{
tempStr += "\n"+tableNameObjs[i].value;
}
alert(tempStr);}
</script>

调试易

郁闷了一个星期的问题。喜欢挑战高难度的朋友来看看啊。

解决方案 »