让z-index工作：元素在被拖动时消失

Question

Here's the fiddle我使用unicode字符制作了棋盘。 我的问题是，当我拖动一块时，即使我的z-index为1，它也会消失。

.player {
    z-index:1;
    cursor:pointer;
}
main {
    font-size:25px;
}
.boardRow {
    border-left:3px solid #000;
    clear:left;
}
.top {
    border-top:1px solid #000;
}
.cell {
    z-index:0;
    float:left;
    width:3em;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
    vertical-align:middle;
    /* Doesn't work */
}
.first {
    border-left:1px solid #000;
}

这是html：

<main role="main" class="container">
    <div class="boardRow">
        <span class="top cell first"><span class="player">&#9820;</span></span>
        <span class="top cell"><span class="player">&#9822;</span></span>
        <span class="top cell"><span class="player">&#9821;</span></span>
        <span class="top cell"><span class="player">&#9819;</span></span>
        <span class="top cell"><span class="player">&#9818;</span></span>
        <span class="top cell"><span class="player">&#9821;</span></span>
        <span class="top cell"><span class="player">&#9822;</span></span>
        <span class="top cell"><span class="player">&#9820;</span></span>
    </div>
    <div class="boardRow">
        <span class="cell first"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
        <span class="cell"><span class="player">&#9823;</span></span>
    </div>
    <div class="boardRow">
        <span class="cell first">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
    </div>
    <div class="boardRow">
        <span class="cell first">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
    </div>
    <div class="boardRow">
        <span class="cell first">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
    </div>
    <div class="boardRow">
        <span class="cell first">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
         <span class="cell">&nbsp;</span>
    </div>
    <div class="boardRow">
        <span class="cell first"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
        <span class="cell"><span class="player">&#9817;</span></span>
    </div>
    <div class="boardRow"> 
        <span class="cell first"><span class="player">&#9814;</span></span>
        <span class="cell"><span class="player">&#9816;</span></span>
        <span class="cell"><span class="player">&#9815;</span></span>
        <span class="cell"><span class="player">&#9813;</span></span>
        <span class="cell"><span class="player">&#9812;</span></span>
        <span class="cell"><span class="player">&#9815;</span></span>
        <span class="cell"><span class="player">&#9816;</span></span>
        <span class="cell"><span class="player">&#9814;</span></span>
    </div>
</main>