想请教一下，两个层相交重叠的问题。

每个元素加个ondragend事件调用一个检查函数
比较自己和页面的所有元素的位置关系

解决方案 »

  1.   

    这个我明白，问题是这个检查函数应该怎么写，其实我已经写好了，两个平行矩形相交重叠一共16种情况，我用了16个IF else，好长一串，看起来不爽，我想用一个简单的数学公式就搞定它，这个问题本来不应该在这里发，是个纯粹的数学问题。
      

  2.   

    这是我的代码：
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    .draggingCursor {
    cursor: move;
    }
    -->
    </style>
    <script language="javascript">
    //2004-8-17
    //从头再来
    //only for IEfunction forSelect(){
    return false;
    }//var theCurrentUnderLayer; //最近操作的下面层
    var theUnderLayerOldX; //下面层的原始坐标
    var theUnderLayerOldY;
    var theUnderLayerOldWidth; //下面层的原始大小
    var theUnderLayerOldHeight;
    var draggingLayerOldX; //拖动层的原始坐标
    var draggingLayerOldY;
    var draggingLayerOldWidth; //拖动层原始大小
    var draggingLayerOldHeight;function beginDrag(elementToDrag,event)  {
    if(event.button!=1) return false; //确保是左键
    draggingLayerOldX=parseInt(elementToDrag.style.left); //保存当前拖动层的原始坐标
    draggingLayerOldY=parseInt(elementToDrag.style.top);
    draggingLayerOldWidth=parseInt(elementToDrag.style.width); //保存当前拖动层的原始坐标
    draggingLayerOldHeight=parseInt(elementToDrag.style.height);
    elementToDrag.style.zIndex=getMaxZindex();

    var delatX=event.clientX-draggingLayerOldX;
        var delatY=event.clientY-draggingLayerOldY; var LayerForDrag=document.all.LayerForDrag;
    LayerForDrag.style.zIndex=getMaxZindex();
    LayerForDrag.style.width=draggingLayerOldWidth;
    LayerForDrag.style.height=draggingLayerOldHeight;
    LayerForDrag.style.left=(event.clientX-delatX)+"px";
    LayerForDrag.style.top=(event.clientY-delatY)+"px";

    LayerForDrag.style.display="block";

    var allLayers=new Array(4)
    allLayers[0]=document.all.Layer1;
    allLayers[1]=document.all.Layer2;
    allLayers[2]=document.all.Layer3;
    allLayers[3]=document.all.Layer4;    document.attachEvent("onmousemove",moveHandler);
        document.attachEvent("onmouseup",upHandler);
        event.cancelBubble=true;
        event.returnValue=false;
        function moveHandler(e)  {
    if(!e) e=window.event;  
    //elementToDrag.style.left=(e.clientX-delatX)+"px";
    //elementToDrag.style.top=(e.clientY-delatY)+"px";
    LayerForDrag.style.left=(e.clientX-delatX)+"px";
    LayerForDrag.style.top=(e.clientY-delatY)+"px";
    //判断当前拖动层shi是否可以和下面层交换了,如果是,则闪烁下面层
    for(var i=0;i<allLayers.length;i++)
    if(elementToDrag!=allLayers[i])
    if(caculateSuperposeProportion(LayerForDrag,allLayers[i])){
    remindTheUnderLayer(allLayers[i]);
    break;
    }else{
    hideLayerForUnder();
    }
    e.cancelBubble=true;
    }    function upHandler(e) {
    if(!e) e=window.event;  
    document.detachEvent("onmouseup",upHandler);
    document.detachEvent("onmousemove",moveHandler);
    LayerForDrag.style.display="none";
    hideLayerForUnder();
    e.cancelBubble=true;
    //判断当前拖动层的位置,以及是否交换与下面层是否交换坐标大小属性
    for(var i=0;i<allLayers.length;i++)
    if(elementToDrag!=allLayers[i])
    if(caculateSuperposeProportion(LayerForDrag,allLayers[i])){
    changeTheUnderLayerPosition(elementToDrag,allLayers[i]);
    return;
    break;
    }
    elementToDrag.style.left=draggingLayerOldX; //如果没有需要交换层的属性,则将当前拖动层恢复到拖动前位置
    elementToDrag.style.top=draggingLayerOldY;
    } 
    }

    function getMaxZindex(){
    var maxZindex=1;
    var obj;
    obj=document.all.tags("div");
    if(obj){
    for(var i=0;i<obj.length;i++){
    if(obj(i).style.zIndex>maxZindex)
    maxZindex=obj(i).style.zIndex+2;
    else
    maxZindex+=2;
    }
    }
    return maxZindex;
    }

    function remindTheUnderLayer(theUnderLayer) {
    var LayerForUnder=document.all.LayerForUnder;
    LayerForUnder.style.left=theUnderLayer.style.left;
    LayerForUnder.style.top=theUnderLayer.style.top;
    LayerForUnder.style.width=theUnderLayer.style.width;
    LayerForUnder.style.height=theUnderLayer.style.height;
    LayerForUnder.style.zIndex=getMaxZindex()-1;
    LayerForUnder.style.display="block";
    }function setLayerForUnderBorde() {
    var LayerForUnder=document.all.LayerForUnder;
    if(LayerForUnder.style.borderStyle=="none")
    LayerForUnder.style.borderStyle="dotted"
    else
    LayerForUnder.style.borderStyle="none"
    }function hideLayerForUnder(){
    document.all.LayerForUnder.style.display="none";
    }
      

  3.   

    //计算机当前拖动层与下面层的重叠面积，如果大于50%则将下面一层的位置挪动导当前拖动层的原来位置
    function caculateSuperposeProportion(dl,ul){
    var draggingLayerWidth=parseInt(dl.style.width);
    var draggingLayerHeight=parseInt(dl.style.height);
    var draggingLayerArea=draggingLayerWidth*draggingLayerHeight //当前拖动层的面积
    var draggingLayerLTX=parseInt(dl.style.left); //左上坐标
    var draggingLayerLTY=parseInt(dl.style.top);
    var draggingLayerRTX=draggingLayerLTX+draggingLayerWidth; //右上坐标
    var draggingLayerRTY=draggingLayerLTY;
    var draggingLayerRBX=draggingLayerRTX; //右下坐标
    var draggingLayerRBY=draggingLayerLTY+draggingLayerHeight;
    var draggingLayerLBX=draggingLayerLTX; //左下坐标
    var draggingLayerLBY=draggingLayerRBY;

    var theUnderLayerWidth=parseInt(ul.style.width);
    var theUnderLayerHeight=parseInt(ul.style.height);
    var theUnderLayerArea=theUnderLayerWidth*theUnderLayerHeight;
    var theUnderLayerLTX=parseInt(ul.style.left); //左上坐标
    var theUnderLayerLTY=parseInt(ul.style.top);
    var theUnderLayerRTX=theUnderLayerLTX+theUnderLayerWidth; //右上坐标
    var theUnderLayerRTY=theUnderLayerLTY;
    var theUnderLayerRBX=theUnderLayerRTX; //右下坐标
    var theUnderLayerRBY=theUnderLayerLTY+theUnderLayerHeight;
    var theUnderLayerLBX=theUnderLayerLTX; //左下坐标
    var theUnderLayerLBY=theUnderLayerRBY;

    var superposeWidth=0;
    var superposeHeight=0;
    var superposeAear=0;

    //以下12种情况,判断顺序不能变
    //当前拖动图层的被包含在下面的图层的范围内
    if((draggingLayerLTX>theUnderLayerLTX)&&(draggingLayerRTX<theUnderLayerRTX)&&(draggingLayerLTY>theUnderLayerLTX)&&(draggingLayerLBY<theUnderLayerLBY))
    {
    //alert("在其中")
    return true;
    }
    //当前拖动图层整个覆盖下面图层
    if((draggingLayerLTX<theUnderLayerLTX)&&(draggingLayerRTX>theUnderLayerRTX)&&(draggingLayerLTY<theUnderLayerLTY)&&(draggingLayerLBY>theUnderLayerLBY))
    {
    //alert("拖动图层覆盖下面图层")
    return true;
    }
    //只有当前拖动图层的左上角和右上角在下面的图层的范围内
    if((draggingLayerLTY>theUnderLayerLTY)&&(draggingLayerLTY<theUnderLayerLBY)&&(draggingLayerLTX>theUnderLayerLTX)&&(draggingLayerRTX<theUnderLayerRTX))
    {
    //alert("拖动图层上部包含在下面图层")
    superposeWidth=parseInt(dl.style.width);
    superposeHeight=theUnderLayerLBY-draggingLayerLTY;
    superposeAear=superposeWidth*superposeHeight;
    if((superposeAear/draggingLayerArea>=0.5)||(superposeAear/theUnderLayerArea>=0.5))
    return true;
    }
    //只有当前拖动图层的右下角和右上角在下面的图层的范围内
    if((draggingLayerLTY>theUnderLayerLTY)&&(draggingLayerLBY<theUnderLayerLBY)&&(draggingLayerRTX>theUnderLayerLTX)&&(draggingLayerRTX<theUnderLayerRTX))
    {
    //alert("拖动图层左部包含在下面图层中")
    superposeWidth=draggingLayerRTX-theUnderLayerLTX;
    superposeHeight=parseInt(dl.style.height);
    superposeAear=superposeWidth*superposeHeight;
    if((superposeAear/draggingLayerArea>=0.5)||(superposeAear/theUnderLayerArea>=0.5))
    return true;
    }
    //只有当前拖动图层的左下角和右下角在下面的图层的范围内
    if((draggingLayerLBY>theUnderLayerLTY)&&(draggingLayerLBY<theUnderLayerLBY)&&(draggingLayerLTX>theUnderLayerLTX)&&(draggingLayerRTX<theUnderLayerRTX))
    {
    //alert("拖动图层下部包含在下面图层中")
    superposeWidth=parseInt(dl.style.width);
    superposeHeight=draggingLayerLBY-theUnderLayerLTY;
    superposeAear=superposeWidth*superposeHeight;
    if((superposeAear/draggingLayerArea>=0.5)||(superposeAear/theUnderLayerArea>=0.5))
    return true;
    }
    //只有当前拖动图层的左上角和左下角在下面的图层的范围内
    if((draggingLayerLTX>theUnderLayerLTX)&&(draggingLayerLTX<theUnderLayerRTX)&&(draggingLayerLTY>theUnderLayerLTY)&&(draggingLayerLBY<theUnderLayerLBY))
    {
    //alert("拖动图层左部包含在下面图层中")
    superposeWidth=theUnderLayerRTX-draggingLayerLTX;
    superposeHeight=parseInt(dl.style.height);
    superposeAear=superposeWidth*superposeHeight;
    if((superposeAear/draggingLayerArea>=0.5)||(superposeAear/theUnderLayerArea>=0.5))
    return true;
    }
    //只有当前拖动图层的左上角在下面的图层的范围内
    if((draggingLayerLTX>theUnderLayerLTX)&&(draggingLayerLTX<theUnderLayerRTX)&&(draggingLayerLTY>theUnderLayerLTY)&&(draggingLayerLTY<theUnderLayerLBY))
    {
    //alert("左上角在其中")
    superposeWidth=theUnderLayerRTX-draggingLayerLTX;
    superposeHeight=theUnderLayerLBY-draggingLayerLTY;
    superposeAear=superposeWidth*superposeHeight;
    if((superposeAear/draggingLayerArea>=0.5)||(superposeAear/theUnderLayerArea>=0.5))
    return true;
    }
    //只有当前拖动图层的右上角在下面的图层的范围内
    if((draggingLayerRTX>theUnderLayerLTX)&&(draggingLayerRTX<theUnderLayerRTX)&&(draggingLayerRTY>theUnderLayerLTY)&&(draggingLayerRTY<theUnderLayerLBY))
    {
      

  4.   

    我判断两个矩形是否相交的思路是:
    做两个函数
    一个是判断一个点(x,y)是否在当前的矩形中
    一个是当前的矩形是否完全包含在需要检查的矩形中
    在ondragend事件发生时逐个验证每个矩形的四个顶点是否在事件对象的矩形中以及是否包含了事件对象的矩形
    如果有任何一个顶点在矩形中或者事件对象的矩形包含于已有的矩形中那就是有相交,否则就没有相交