DIV移动到另一DIV区域内，前DIV隐藏并弹出提示

思路我知道，但是代码不会写，javascript学的不好

解决方案 »

  1.   

    http://hi.baidu.com/yuanxiangyi/blog/item/be258010ef30f102203f2ebe.html
    这个是一个移动的
    至于覆盖的问题，你加一个隐藏当前DIV就可以了
      

  2.   

    用个span<span id="span1"> 
    <DIV> 
    ...
    ...
    </DIV>
    </span>
    再写个span隐藏和显示的function
    //隐藏
    function beforePrint() { 
    span1.style.display='none'; 
    } 
    //显示
    function afterPrint() { 
    span1.style.display=''; 
    } 
      

  3.   

    要求很简单。一个DIV1一个DIV2，拖动DIV1到DIV2区域内时，DIV2边框颜色变一下，div1隐藏并触发一事件。很简单的，只是javascript不大懂，所以请你帮写一下。有高分送
      

  4.   

    <html>
    <head>
    <title></title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function AccpDiv()
    {
    var objX = 0;
        var objY = 0;
    this.down=function()
    {
    //取出鼠标按下的坐标
    var clientX=parseInt(window.event.clientX);
    var clientY=parseInt(window.event.clientY); //取出拖动层的坐标
    var obj_x=parseInt(document.getElementById("A").style.left);
    var obj_y=parseInt(document.getElementById("A").style.top); objX=clientX-obj_x;
    objY=clientY-obj_y;
    } this.drag=function()
    {
    if(objX!=0&&objY!=0)
    {
    if(window.event.button==1)
    {
    var leftPo= event.clientX-objX;
    var topPo=event.clientY-objY;

    document.getElementById("A").style.left=leftPo;
    document.getElementById("A").style.top=topPo; }
    }
    }

    this.up=function()
    {
    objX = 0;
    objY = 0;
    //判断是否移动到B的div里
    var leftA=parseInt(document.getElementById("A").style.left);
    var topA=parseInt(document.getElementById("A").style.top); var leftB=parseInt(document.getElementById("B").style.left);
    var topB=parseInt(document.getElementById("B").style.top);
    if(document.getElementById("A").style.display!="none")
    { if(leftA>leftB&&topA>topB)
    {
    if(confirm('您确认关闭么'))
    {
    document.getElementById("A").style.display="none";
    }
    }
    }
    }}
    //-->
    </SCRIPT>
    <script>
    var div=new AccpDiv();
    </script>
    </head>
    <body onMouseUp="div.up()" onMouseMove="div.drag()">
    <div id="A" style="background-color:#ffcc99;width:200px;height:160px;position:absolute;left:0px;top:0px;z-index:2" onmousedown="div.down();">
    </div>
    <div id="B" style="background-color:#ff5599; width:400px; height:300px;position:absolute;left:400px; top:200px;z-index:1">
    </div>
    </body>
    </html>
      

  5.   

    yzsunlight的基本很相似了，就是你那个不管到哪左键都会弹出提示。还有点要求就是，DIV1移动到DIV2上弹出提示触发事件后，DIV1还要回到原来的位置
      

  6.   


    <html>
    <head>
    <style type="text/css">
    #icon
    {
    position:absolute;
    z-index:100;
    } #area
    {
    position:absolute;
    border-style:solid;
    border-color:red;
    z-index:10;
    }
    </style>
    <script type="text/javascript"> function initStyle(element,area)
    {
    element.style.width="165px";
    element.style.height="55px";
    element.style.left="100px";
    element.style.top="100px"; area.style.width="200px";
    area.style.height="300px";
    area.style.left="400px";
    area.style.top="100px";
    area.style.borderWidth="2px";
    }
    function startDrag(element,e,area)
    {
    element.deltaX=e.clientX-parseInt(element.style.left);
    element.deltaY=e.clientY-parseInt(element.style.top);
    element.currentStartX=parseInt(element.style.left);
    element.currentStartY=parseInt(element.style.top);
    if (document.addEventListener)
    {
    document.addEventListener("mousemove",function(){dragMove(element,e,area)},true);
    }
    else if(document.attachEvent)
    {
    document.attachEvent("onmousemove",function(){dragMove(element,e,area)});
    }
    else
    {
    document.onmousemove=function(){dragMove(element,e,area)};
    }
    }; function dragMove(element,e,area)
    {
    if(e.button==1)
    {
    element.style.left=e.clientX-element.deltaX+"px";
    element.style.top=e.clientY-element.deltaY+"px"; if(parseInt(element.style.left)+parseInt(element.style.width) > parseInt(area.style.left)
    && parseInt(element.style.left) < parseInt(area.style.left)+parseInt(area.style.width)
    && parseInt(element.style.top)+parseInt(element.style.height) > parseInt(area.style.top)
    && parseInt(element.style.top) < parseInt(area.style.top)+parseInt(area.style.height))
    {
    area.style.backgroundColor="#eeeeee";
    element.isInBox=true;
    }
    else
    {
    area.style.backgroundColor="";
    element.isInBox=false;
    }
    }
    }; function stopDrag(element,area)
    {
    if(element.isInBox)
    {
    if(confirm("put this icon into the box?"))
    {
    element.style.left=parseInt(area.style.left)+parseInt(area.style.borderWidth)+"px";
    element.style.top=parseInt(area.style.top)+parseInt(area.style.borderWidth)+"px";
    }
    else
    {
    element.style.left=element.currentStartX+"px";
    element.style.top=element.currentStartY+"px";
    area.style.backgroundColor="";
    }
    } if (document.removeEventListener)
    {
    document.removeEventListener("mousemove",function(){dragMove(element,e,area)},true);
    }
    else if(document.detachEvent)
    {
    document.detachEvent("onmousemove",function(){dragMove(element,e,area)});
    }
    else
    {
    document.onmousemove="";
    }
    };
    </script>
    </head>
    <body onload="initStyle(document.getElementById('icon'),document.getElementById('area'))">
    <div id="icon" onmousedown="startDrag(this,event,document.getElementById('area'))" onmouseup="stopDrag(this,document.getElementById('area'))"><img onmousemove="return false" title="Drag me" src="http://www.csdn.net/Images/logo_csdn.gif"/></div>
    <div id="area"></div>
    </body>
    </html>
      

  7.   


    <html>
    <head>
    <style type="text/css">
    #icon
    {
    position:absolute;
    z-index:100;
    } #area
    {
    position:absolute;
    border-style:solid;
    border-color:red;
    z-index:10;
    }
    </style>
    <script type="text/javascript"> function initStyle(element,area)
    {
    element.style.width="165px";
    element.style.height="55px";
    element.style.left="100px";
    element.style.top="100px"; area.style.width="200px";
    area.style.height="300px";
    area.style.left="400px";
    area.style.top="100px";
    area.style.borderWidth="2px";
    }
    function startDrag(element,e,area)
    {
    element.deltaX=e.clientX-parseInt(element.style.left);
    element.deltaY=e.clientY-parseInt(element.style.top);
    element.currentStartX=parseInt(element.style.left);
    element.currentStartY=parseInt(element.style.top);
    if (document.addEventListener)
    {
    document.addEventListener("mousemove",function(){dragMove(element,e,area)},true);
    }
    else if(document.attachEvent)
    {
    document.attachEvent("onmousemove",function(){dragMove(element,e,area)});
    }
    else
    {
    document.onmousemove=function(){dragMove(element,e,area)};
    }
    }; function dragMove(element,e,area)
    {
    if(e.button==1)
    {
    element.style.left=e.clientX-element.deltaX+"px";
    element.style.top=e.clientY-element.deltaY+"px"; if(parseInt(element.style.left)+parseInt(element.style.width) > parseInt(area.style.left)
    && parseInt(element.style.left) < parseInt(area.style.left)+parseInt(area.style.width)
    && parseInt(element.style.top)+parseInt(element.style.height) > parseInt(area.style.top)
    && parseInt(element.style.top) < parseInt(area.style.top)+parseInt(area.style.height))
    {
    area.style.backgroundColor="#eeeeee";
    element.isInBox=true;
    }
    else
    {
    area.style.backgroundColor="";
    element.isInBox=false;
    }
    }
    }; function stopDrag(element,area)
    {
    if(element.isInBox)
    {
    if(confirm("Remove icon?"))
    {
    element.style.display="none";
    }
    else
    {
    element.style.left=element.currentStartX+"px";
    element.style.top=element.currentStartY+"px";
    }
    area.style.backgroundColor="";
    } if (document.removeEventListener)
    {
    document.removeEventListener("mousemove",function(){dragMove(element,e,area)},true);
    }
    else if(document.detachEvent)
    {
    document.detachEvent("onmousemove",function(){dragMove(element,e,area)});
    }
    else
    {
    document.onmousemove="";
    }
    };
    </script>
    </head>
    <body onload="initStyle(document.getElementById('icon'),document.getElementById('area'))">
    <div id="icon" onmousedown="startDrag(this,event,document.getElementById('area'))" onmouseup="stopDrag(this,document.getElementById('area'))"><img onmousemove="return false" title="Drag me" src="http://www.csdn.net/Images/logo_csdn.gif"/></div>
    <div id="area"></div>
    </body>
    </html>
      

  8.   

    谢谢YH_Random了，我改了半天没改好了，这下有了，谢谢了