JavaScript。。难题，人在线


<table width="157" height="141" border="1">
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">A</div></td>
    <td bgcolor="#FFFFFF"><div align="center">B</div></td>
  </tr>
  <tr>
    <td><div align="center">D</div></td>
    <td><div align="center">E</div></td>
  </tr>
</table>
单鼠标点击图片A的时候并移动到图片E处，然后松开鼠标，要使此时A与E的位置调换。同理其他图片也可以这样互相移动

解决方案 »

  1.   

    <head>
    <script type = "text/javascript">

    var pointFirst;
    var pointSecond;

    var first;
    var second function onClick(id){  
      first = id;
      pointFirst = document.getElementById(id).innerText;
    }

    function onMouseUp(id){   
       second = id;
       pointSecond = document.getElementById(id).innerText;    
       tempImageChange();   
    }

    function tempImageChange(){  
     document.getElementById(first).innerText = pointSecond;
     document.getElementById(second).innerText = pointFirst;
    }</script>
    </head><table width="157" height="141" border="1">
      <tr>
        <td id="aId" bgcolor="#FFFFFF" onmousedown ="onClick('aId')" onmouseup="onMouseUp('aId')" value="a"><div align="center">A</div></td>
        <td id="bId" bgcolor="#FFFFFF" onmousedown ="onClick('bId')" onmouseup="onMouseUp('bId')"><div align="center">B</div></td>
      </tr>
      <tr>
        <td id = "dId" onmousedown ="onClick('dId')" onmouseup="onMouseUp('dId')"><div align="center">D</div></td>
        <td id = "eId" onmousedown ="onClick('eId')" onmouseup="onMouseUp('eId')"><div align="center">E</div></td>
      </tr>
    </table>上面的原理差不多！
      

  2.   

    这个功能用javaScript实现有点困难（不是一个技术上的难度，而是很繁琐），一时半会实现不了，而且还用到鼠标移动事件，这个事件会产生大量操作，所以要非常慎重，否则会导致浏览器瘫痪甚至死机。