100分求助!!!层的简单问题！

休要处理
<div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;" 
   onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
   <div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
   <div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
   <div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
</div>
<button onclick="clk()">右端对齐</button>
<script language="javascript">
  function down(obj){
    if(event.srcElement.tagName!="DIV") return;
    if(obj==event.srcElement) return;
    if(event.srcElement.moveFlag==0){
      event.srcElement.moveFlag=1;
      event.srcElement.oldX = event.clientX;
      event.srcElement.oldY = event.clientY;
    }
    if(event.shiftKey){
      event.srcElement.style.border = "3px outset";
      event.srcElement.moveFlag=2;
    }else{
      event.srcElement.style.border = "";
    };
    event.cancelBubble = true;
  }
  function up(obj){
if(!event.shiftKey){
  event.srcElement.moveFlag = 0;
  event.srcElement.oldX = 0;
event.srcElement.oldY = 0;
}
  }
  function move(obj){
    if(event.srcElement.tagName!="DIV") return;
    if(obj==event.srcElement) return;
    if(event.srcElement.moveFlag==1){
      event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
      event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
      event.srcElement.oldX = event.clientX;
      event.srcElement.oldY = event.clientY;
      if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
        event.srcElement.style.top = 0;
      }
      if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
        event.srcElement.style.left = 0;
      }
      if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
        event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
      }
      if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
        event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
      }
    }
  }
  function clk(){
    var leftPos = -1;
    for(var i=0;i<d.children.length;i++){
      if(d.children[i].moveFlag==2){
        if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
        if(leftPos!=-1) d.children[i].style.left = leftPos;
      }
    }
  }
</script>

解决方案 »

  1.   

    to rocsnake(dp) and all:
    我试了一下，发现以下几个问题：
    1＞右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上
    2＞右对齐时d3覆盖到了d2上
    3＞拖动的动作不好用，层拖到一半有时就停下来，不动了。移动一段时间之后，松开鼠标左键，层仍旧被拖动我还有一个类似问题，"在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
    请见http://expert.csdn.net/Expert/topic/1873/1873025.xml?temp=.7598993由于时间紧迫,哪位大虾能解决这两个问题马上放200分!!!
      

  2.   

    to rocsnake(dp) and all:
    我试了一下，发现以下几个问题：
    1＞右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上
    2＞右对齐时d3覆盖到了d2上
    3＞拖动的动作不好用，层拖到一半有时就停下来，不动了。移动一段时间之后，松开鼠标左键，层仍旧被拖动我还有一个类似问题，"在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
    请见http://expert.csdn.net/Expert/topic/1873/1873025.xml?temp=.7598993由于时间紧迫,哪位大虾能解决这两个问题马上放200分!!!
      

  3.   

    我上面的四个汉字写错了，是需要修改，我只是给你提供了一个基本的解决办法，当然还不完善，则需要好生的控制DIV和BODY的事件
      

  4.   

    to rocsnake(dp):
    你能不能把我说的那三个问题修改一下呀？
    帮忙帮到底吧。
    特别是“右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上”怎么解决？多谢！
      

  5.   

    你可看看这里的源代码
    http://yu.40it.com
      

  6.   

    我解决第一个问题
    第二个问题原因在于第一个问题上面
    第三个问题是由于鼠标拖动太快，导致离开d2层，目前我还没有找到好得解决办法：p
    <!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="">
    </HEAD><BODY>
    <div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;" 
       onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
       <div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
       <div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
       <div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
    </div>
    <button onclick="clk()">右端对齐</button>
    <script language="javascript">
      function down(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==0){
          event.srcElement.moveFlag=1;
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
        }
        if(event.shiftKey){
          event.srcElement.style.border = "3px outset";
          event.srcElement.moveFlag=2;
        }else{
          event.srcElement.style.border = "";
        };
        event.cancelBubble = true;
      }
      function up(obj){
    if(!event.shiftKey){
      event.srcElement.moveFlag = 0;
      event.srcElement.oldX = 0;
    event.srcElement.oldY = 0;
    }
      }
      function move(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==1){
          event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
          event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
          if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
            event.srcElement.style.top = 0;
          }
          if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
            event.srcElement.style.left = 0;
          }
          if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
            event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
          }
          if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
            event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
          }
        }
      }
      function clk(){
        var leftPos = d.children[0].style.left;
    alert(leftPos)
        for(var i=1;i<d.children.length;i++){
          if(d.children[i].moveFlag==2){
      alert(d.children[i].moveFlag)
            if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
            if(leftPos!=-1) d.children[i].style.left = leftPos;
          }
        }
      }
    </script></BODY>
    </HTML>
      

  7.   

    我试了一下，还是不行呀？"右对齐或左对齐，上对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上"
    比如现在要做"左对齐",我按下shift键不放,分别选择d2,d1,d3,那么按常规应该是d1,d3以d2为基准,即d1,d3的左边框的横坐标与d2左边框的横坐标相同。而当我选择的顺序发生变化时，比如现在的顺序变成:我按下shift键不放,分别选择d3,d2,d1,
    那么得到的结果应该是以d3为基准,即d2,d1的左边框的横坐标与d3左边框的横坐标相同。其实我说的这个效果就是平常我们经常使用的，问题的关键:怎样捕捉"选择的层的顺序",不知道我说明白没有？
    大虾帮我!
      

  8.   

    <body onmousemove="bodyMove()" onmouseup="bodyUp()" onselectstart="return false;">
    <div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;" 
       onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
       <div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
       <div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
       <div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
    </div>
    </body>
    <button onclick="clk()">右端对齐</button>
    <script language="javascript">
      var moveFunc = null;
      var moveObj  = null;
      var upFunc = null;
      var upObj = null;
      function bodyMove(){
        if(moveObj==null) return;
        moveFunc(moveObj);
      }
      
      function bodyUp(){
        if(upObj==null) return;
        upFunc(upObj);
        upObj = null;
        upFunc = null;
        moveFunc = null;
        moveObj = null;
      }
      function down(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==0){
          event.srcElement.moveFlag=1;
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
          moveFunc = move1;
          moveObj = event.srcElement;
          upFunc = up1;
          upObj = event.srcElement;
        }
        if(event.shiftKey){
          event.srcElement.style.border = "3px outset";
          event.srcElement.moveFlag=2;
        }else{
          event.srcElement.style.border = "";
        };
        event.cancelBubble = true;
      }
      function up(obj){
    if(!event.shiftKey){
      event.srcElement.moveFlag = 0;
      event.srcElement.oldX = 0;
    event.srcElement.oldY = 0;
    }
        event.cancelBubble = true;
      }
      function up1(obj){
        if(obj.moveFlag!=2){
      obj.moveFlag = 0;
      obj.oldX = 0;
    obj.oldY = 0;
    }
      }
      function move(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==1){
          event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
          event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
          if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
            event.srcElement.style.top = 0;
          }
          if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
            event.srcElement.style.left = 0;
          }
          if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
            event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
          }
          if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
            event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
          }
        }
        event.cancelBubble = true;
      }
      function move1(obj){
        if(obj.moveFlag==1){
          obj.style.left = event.clientX - obj.oldX+parseInt(obj.style.left);
          obj.style.top = event.clientY - obj.oldY+parseInt(obj.style.top);
          obj.oldX = event.clientX;
          obj.oldY = event.clientY;
          if(obj.getBoundingClientRect().top<obj.parentElement.getBoundingClientRect().top){
            obj.style.top = 0;
          }
          if(obj.getBoundingClientRect().left<obj.parentElement.getBoundingClientRect().left){
            obj.style.left = 0;
          }
          if(obj.getBoundingClientRect().bottom>obj.parentElement.getBoundingClientRect().bottom){
            obj.style.top = obj.parentElement.clientHeight - obj.clientHeight;
          }
          if(obj.getBoundingClientRect().right>obj.parentElement.getBoundingClientRect().right){
            obj.style.left = obj.parentElement.clientWidth - obj.clientWidth;
          }
        }
        event.cancelBubble = true;
      }
      function clk(){
        var leftPos = 9999;
        var top1 = 9999;
        var top2 = -1;
        var num = 0;
        for(var i=0;i<d.children.length;i++){
          if(d.children[i].moveFlag==2){
            if(leftPos>parseInt(d.children[i].style.left))leftPos=parseInt(d.children[i].style.left);
            if(top1>parseInt(d.children[i].style.top))top1=parseInt(d.children[i].style.top);
            if(top2<parseInt(d.children[i].style.top))top2=parseInt(d.children[i].style.top);
            num++;
          }
        }
        if(num<1) return;
        var lPos = (top2-top1)/(num-1);
        num = 0;
        for(var i=0;i<d.children.length;i++){
          if(d.children[i].moveFlag==2){
            d.children[i].style.left = leftPos;
            d.children[i].style.top = top1 + num;
            num+=lPos;
          }
        }
      }
    </script>
    最好你能自己总结，写出根容易维护的代码，我还比较忙，只能到这了
      

  9.   

    <!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="">
    </HEAD><BODY>
    <div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;" 
       onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
       <div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
       <div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
       <div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
    </div>
    <button onclick="clk()">右端对齐</button>
    <script language="javascript">
    a=10;
      function down(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==0){
          event.srcElement.moveFlag=1;
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
        }
        if(event.shiftKey){
          event.srcElement.style.border = "3px outset";
          event.srcElement.moveFlag=a;
      a--;
        }else{
          event.srcElement.style.border = "";
        };
        event.cancelBubble = true;
      }
      function up(obj){
    if(!event.shiftKey){
      event.srcElement.moveFlag = 0;
      event.srcElement.oldX = 0;
    event.srcElement.oldY = 0;
    }
      }
      function move(obj){
        if(event.srcElement.tagName!="DIV") return;
        if(obj==event.srcElement) return;
        if(event.srcElement.moveFlag==1){
          event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
          event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
          event.srcElement.oldX = event.clientX;
          event.srcElement.oldY = event.clientY;
          if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
            event.srcElement.style.top = 0;
          }
          if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
            event.srcElement.style.left = 0;
          }
          if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
            event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
          }
          if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
            event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
          }
        }
      }
      function clk(){
    //    gzg=Math.max(d.children[0].moveFlag,d.children[1].moveFlag,d.children[2].moveFlag)
    // alert(gzg);
    // return false;
        var leftPos = -1;
    // alert(leftPos)
    for(var i=0;i<d.children.length;i++){
    if(d.children[i].moveFlag==10){
    leftPos=d.children[i].style.left;
    }
    }
        for(var i=0;i<d.children.length;i++){
    //      if(d.children[i].moveFlag==10){
      alert(d.children[i].moveFlag)
      //      if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
            d.children[i].style.left = leftPos;
    //      }
        }
    a=10;
      }
    </script></BODY>
    </HTML>
      

  10.   

    呵呵，想在页面中写一个MID呀。
    关键是用堆栈或队列保存层的指针。其他都好办
      

  11.   

    <BODY>
    判断keyFlag可以判断出是否按下Shift键，按住Shift并点鼠标。<br>
    <font color="red"><span id="a"></span></font>
    <script>
    var keyFlag = false;document.body.onkeydown = function(){ if (event.keyCode == 16) keyFlag = true };
    document.body.onkeyup = function(){ keyFlag = false };
    document.body.onclick = function(){ a.innerText = keyFlag };
    </script>
    </BODY>
    这个是判断是否按住Shift点鼠标的代码。
      

  12.   

    xiaoshi您好!
    你的方法可以正常运行，但是却产生了新的问题:
    1>用for遍历两次对于多个层(比如:40,50个)好像效率不高，能否用堆栈或动态数组?
    2>对齐之后，可能两个层完全重叠，怎样禁止层之间叠加，即不允许层之间有重叠的部分，怎样判断并撤消此操作？
    3>层的宽度和高度可以不相同，以左对齐为例,对齐之后有的层的右半部分已经超出了拖拽区域的右边界,如果有这种情况撤消操作？我还个相似的问题你顺便给看看。
    "在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
    真是太麻烦您了，多谢多谢！