表格中的可拖動div元素落後於其他表格單元格

Question

所以我在JS（+ jQuery）中製作國際象棋遊戲，最後要做的就是讓這些部分可以拖動。

我的董事會是正規的html表（TR和TD）與DIVs包含件。 我使用jQuery UI做的DIV拖動，但每次我試圖拖動一個DIV用一塊它停留在同一個TD其它地方： http://screenshooter.net/8964979/Klpmu17_06_02_2014__12_38_17

HTML是這樣的：

<table> 
    <tr> 
     <td class="pole"> 
      <div class="figura">here goes a piece</div> 
     </td> 
     <td class="pole"> 
      ... 
     </td> 
    </tr> 
    <tr> 
     ... 
    </tr> 
</table> 

然後JS：

$(".figura").draggable({ 
      revert: true, 
      appendTo: 'body', 
      stack: '.pole', 
      start: function() { 
       $('#tabs').css('z-index', '9999'); 
      }, 
      stop: function() { 
       $('#tabs').css('z-index', '0'); 
      } 
     }); 

     $(".pole").droppable(); 

我怎樣才能讓他們走出自己的細胞？

Answer 1

看來，我TD元素得到了

overflow: hidden; 

沒有上述它完美的作品：d

Answer 2

try

containment:'window', 

，而不是

appendTo: 'body', 

或者嘗試他們都在同一時間

Additon可以設置Z-指數與options