0

私は使用jQuery Sortableしていますが、うまく機能します。しかし、ここで小さな問題が発生しています。
   あるブロックの要素を別のブロックに移動できる 2 つのブロックがありますが、問題は、右側のブロックのすべての要素が左側のブロックに移動され、左側のブロックから要素を移動できないことです。右側のブロックには空きスペースがないため、右側のブロックに移動します。
要素が完全に移動される前のブロック ここに画像の説明を入力

右側のブロック要素を左に移動した後のブロック ここに画像の説明を入力 現在、左側のブロックから右側のブロックに要素を移動できません。

空のブロック(2番目の画像の右側のブロック)または他の代替ソリューションに空のスペースを保持する方法はありますか?

ここに私のコードとjsfiddle hereがあります。

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <style>
  body{
   margin:10px;
  }
  table{
   width:100%;
  }
  .gridWrapper{
   border-collapse:collapse;
  }
  .gridWrapper,.gridWrapper tr  td.column{
    border:2px solid red;
    vertical-align:top;
  }
   .grid{
     border-collapse:collapse;
    *border-spacing:10px;
   }
   .grid td{
     border:1px dashed black;
     white-space:nowrap;
     padding:3px 5px;
   }
   .ui-state-highlight{
     height: 1.5em;
     line-height: 1.2em;
   }
  .grid td:first-child{
      text-align: right;
      font-weight: bold;
  }
  td.column{
     width:50%;
   }
  </style>
 </head>

 <body>
 <table class="gridWrapper">
  <tr>
   <td class="column">
  <table id="sort1" class="grid" title="Kurt Vonnegut novels">
    <tbody>
        <tr><td>Name</td><td>Will Smith</td></tr>
        <tr><td>Date of Birth</td><td>25/09/1968</td></tr>
        <tr><td>Zodiac Sign</td><td>Libra</td></tr>
    </tbody>
 </table>
<td class="column">
  <table id="sort2" class="grid" title="Kurt Vonnegut novels">
    <tbody>
        <tr><td>Occupation</td><td>Actor,Producer</td></tr>
        <tr><td>Place of birth</td><td>Philadelphia</td></tr>
    </tbody>
 </table>
</td>
</tr>
</table>
 <script>
  $(".grid tbody").sortable({
       connectWith:'.grid tbody',
       placeholder: "ui-state-highlight",
       dropOnEmpty: true,
       helper: function(e, ui) {
                    ui.children().each(function() {
                        $(this).width($(this).width());
                    });
                    return ui;
                },
        forceHelperSize: true
  }).disableSelection();
 </script>
</body>

</html>
4

1 に答える 1

2

あなたの tbody をブロックレベルの要素にし、最小高さを与えるという醜いハックです。

.grid tbody{
    min-height: 100px;
    display: block;
}

これがフィドルです。テーブルの操作は難しいため、並べ替えにテーブルを使用しないことをお勧めします。そのデータを表示するには、div と li を使用します。

于 2013-07-17T11:45:26.377 に答える