Question

我正在创建一个电话分配列表，该列表会在将某人重新分配到其他电话线后更新数据库。我遇到的问题是，当我尝试使用它的空间时，“空”框会碰到它下面的框。这是我的代码：

<script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });
  </script>

<div class="container">  
    <div id="contentWrap">
    <div id="contentTop">
      <h1>Reservation Team</h1>
      <p>Drag and Drop your name to alter your extension position</p>
    </div>
</div>
 <div class="floatColorsTabs">  <div class="resOffice">Reservation Office <div class="block1"></div> </div> <div class="seaTickCounter">Counter <div class="block2"></div>
       </div>  
<div class="seaKiosk">Kiosk  <div class="block3"></div> </div>  <div class="unassigned">Unassigned  <div class="block4"></div>  </div>  </div> 
<div class="arrow-left-down"></div>
    <table class="top">
      <tr>
      <td>Off Duty</td><td>On Duty</td><td>Desk#</td> <td>Extension</td>
      </tr>
    </table>
    <div id="contentLeft">
        <ul id="sortable1" class="droptrue">
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Ron J</li>
          <li class="ui-state-default">Gary J</li>
          <li class="ui-state-default">Bayern M</li>
          <li class="ui-state-default">Barca L</li>
          <li class="ui-state-default">Chelsea L</li>
           <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
           <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>

        </ul>
        <ul id="sortable2" class="dropfalse">
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Ron J</li>
          <li class="ui-state-default">Gary J</li>
          <li class="ui-state-default">Bayern M</li>
          <li class="ui-state-default">Barca L</li>
          <li class="ui-state-default">Chelsea L</li>
           <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
           <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
          <li class="ui-state-default">Empty</li>
        </ul>
        <!--<ul id="sortable3" class="droptrue">
        </ul>-->
    </div>
    <div id="contentRight">
      <table class="grey" id="grey">

        <?php //$i = 2; $j= 3222; while ($i <= 20 || $j <= 3247) ?>
        <tr><td>2</td>   <td>3222</td></tr>
        <tr><td>3</td>   <td>3223</td></tr>
        <tr><td>4</td>   <td>3224</td></tr>
        <tr><td>8</td>   <td>3221</td></tr>
        <tr><td>9</td>   <td>3229</td></tr>
        <tr><td>10</td>   <td>3230</td></tr>
        <tr><td>11</td>  <td>3231</td></tr>
        <tr><td>12</td>  <td>3232</td></tr>
        <tr><td>15</td>  <td>3235</td></tr>
        <tr><td>17</td>  <td>3237</td></tr>
        <tr><td>18</td>  <td>3238</td></tr>
        <tr><td>19</td>  <td>3239</td></tr>
        <tr><td>20</td>  <td>3240</td></tr>
        <tr><td>21</td>  <td>3241</td></tr>
        <tr><td>22</td>  <td>3242</td></tr>
        <tr><td>23</td>  <td>3243</td></tr>
        <tr><td>24</td>  <td>3244</td></tr>
        <tr><td>25</td>  <td>3245</td></tr>
        <tr><td>26</td>  <td>3246</td></tr>
        <tr><td>27</td>  <td>3247</td></tr>
      </table>

        <table class="top-m" id="green">
           <tr> <td>2</td> <td>3253</td> </tr>
           <tr> <td>3</td> <td>3254</td> </tr>
           <tr> <td>4</td> <td>3255</td> </tr>
           <tr> <td>5</td> <td>3257</td> </tr>
           <tr> <td>6</td> <td>3258</td> </tr>
           <tr> <td>7</td> <td>3259</td> </tr>
           <tr> <td>8</td> <td>3260</td> </tr>
           <tr> <td>9</td> <td>3261</td> </tr>
           <tr> <td>10</td> <td>3262</td> </tr>
        </table>


        <table class="top-p" id="purple">
            <?php $i = 3250; while($i <= 3251) {
                echo "<td>" . $i++ . "</td></tr>";
            } ?>
        </table>

        <table class="top-o" id="light-blue">
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>
           <tr><td>UNASSIGNED</td></tr>

        </table>
      </div>

    <div class="arrow-left-up"></div>

</div>

尝试使用JQuery sortable和MySQL创建电话分配列表

0 个答案: