例如:
1:dfsfsdf                   1:fsdfsdf
2:fsdfdfsd                  2:fdfsfdf
3:fdfdsfdf                  3:sdfdfsd
---------------------------------------------
我想1与3对应,2与1对应...我把1中的图片拖放到3上面,就会提示我的拖放是对的
要是拖放到别的上面在提交后则提示错误,我应该怎样来实现呢??

解决方案 »

  1.   

    如楼上所说捕捉着两个事件,还应该捕捉mouseup事件,否则大多数情况会出错。因为浏览器对象的这些事件没有提供source、sender和target等一些参数,所以你应该在mousedown触发时在全局变量中存储被拖放的对象,也就是mousedown的source。你说的情况只需要在允许停放的对象上调用mouseover句柄来判断是否时刻接受类型的元素就可以了。
      

  2.   

    <html>
    <head>
    <title>一千个经典网页特效</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link rel="stylesheet" href="../css_style/effect.css" type="text/css">
    <link rel="stylesheet" href="../../css_style/effect.css" type="text/css">
    <style>
    <!--
    .drag{position:relative;cursor:hand}
    -->
    </style>
    <script language="JavaScript1.2">
    <!--
    var dragapproved=false
    var z,x,y
    function move(){
    if (event.button==1&&dragapproved){
    z.style.pixelLeft=temp1+event.clientX-x
    z.style.pixelTop=temp2+event.clientY-y
    return false
    }
    }
    function drags(){
    if (!document.all)
    return
    if (event.srcElement.className=="drag"){
    dragapproved=true
    z=event.srcElement
    temp1=z.style.pixelLeft
    temp2=z.style.pixelTop
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
    }
    }
    document.onmousedown=drags
    document.onmouseup=new Function("dragapproved=false")
    //-->
    </script>
    </head><body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td align="center"></td>
      </tr>
    </table>
    <table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td valign="top"> 
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="149" valign="top"> 
                <table width=149 border=0 cellpadding=0 cellspacing=0 bgcolor="47C80E">
                  <tr> 
                    <td colspan=3></td>
                  </tr>
                  <tr> 
                    <td> <img src="images/left_02.gif" width=7 height=269></td>
                  <td align="center" valign="top">
                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="normal">
                  <tr> 
                    <td width="9%" rowspan="4"></td>
                    <td height="60" colspan="3"> <font color="#808080">&gt;&gt;&gt; 
                      实例名称:可用鼠标拖动的元素(图片或文字)<br>
                      &gt;&gt;&gt; 实例效果:</font><br>
                      <img borde="0" src="../../javascript/mouse/cursortrailer/trail1.gif" width="38" height="35" class="drag">        <font color="#808080" size="5" face="Arial Black" class="drag">DHTML</font> 
                    </td>
                  </tr>
                  <tr> 
                    <td colspan="3" height="60"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table></body>
    </html>