利用jQuery實現與空白相鄰格子交換位置
例如：cell11為預設空白，則cell12與cell21可與其交換位置。假設與cell12交換後，則與空白相鄰的為cell11、cell13與cell22，以此類推。
目前問題是當空白與cell12交換後，無法實現與cell11、cell13或cell22作交換的動作。
懇請各位高手指導，謝謝。

    <script type="text/javascript">
    $(function() {
      $(".cell").click(function() {
        $start = $("img[src='11.png']");
        $space = $start.attr("src");
        $targe = $(this).children().attr("src");
        
        $change1 = Math.abs($space.substr(0,1)-$targe.substr(0,1));
        $change2 = Math.abs($space.substr(1,1)-$targe.substr(1,1));
        $change = $change1 + $change2;
        if($change == 1) {
          $(this).children().attr("src",$space);
          $start.attr("src",$targe);
        }
      });
    });
    </script>

  
    <div>
      <table border="2">
        <tr>
          <td id="cell11" class="cell"><img src="space.png"/></td>
          <td id="cell12" class="cell"><img src="12.png"/></td>
          <td id="cell13" class="cell"><img src="13.png"/></td>
        </tr>
        <tr>
          <td id="cell21" class="cell"><img src="21.png"/></td>
          <td id="cell22" class="cell"><img src="22.png"/></td>
          <td id="cell23" class="cell"><img src="23.png"/></td>
        </tr>
        <tr>
          <td id="cell31" class="cell"><img src="31.png"/></td>
          <td id="cell32" class="cell"><img src="32.png"/></td>
          <td id="cell33" class="cell"><img src="33.png"/></td>
        </tr>
      </table>
    </div>