javascript - ドラッグして並べ替え可能なときに列を行に含めたくない

原文 javascript jquery html asp.net-mvc-3

ループ内でデータベースから引き出す次のテーブルがあります。
次の行をドラッグアンドドロップしたいと思います。
「並べ替え」ボタンの列のrowspanは動的です。 (行数になります)。
行をドラッグして並べ替えるときに、「並べ替え」ボタンの列を含めたくないのが問題です。

最初の行をドラッグした後、次のようにドラッグされた行とともに「並べ替え」ボタンの列が移動しました。

ありがとう
答え
不十分なセマンティクス

ここでの主な問題は、保存ボタンがテーブルの一部であることです。どうして? table要素は表形式のデータを表すために使用され、ボタンは表形式のデータではありません。

HTMLのセマンティックがより正確であれば、この問題は完全に回避できます。

<!-- Section A -->
<section>
    <table>
        ...
    </table>
    <button>Save</button>
</section>


これにより、行をドラッグでき、buttonがドラッグに含まれることをまったく心配する必要がなくなります。関連する各セクションテーブルをラップする個別のsection要素があり、buttonはスタンドアロンです。

CSSを使用して、ボタンを表に対して相対的に配置することができます。最初のステップは、テーブルをdisplay: inline-tableに設定して、ボタンをその横に配置できるようにすることです。



デモ



section {
  margin-bottom: 20px;
}

table {
  display: inline-table;
  vertical-align: top;
}

th, td {
  text-align: left;
}

button {
  vertical-align: bottom;
}

<section>
  <table>
    <thead>
      <tr>
        <th colspan="3">Section A</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AA</td>
        <td>13</td>
        <td>SG</td>
      </tr>
      <tr>
        <td>BB</td>
        <td>16</td>
        <td>JP</td>
      </tr>
    </tbody>
  </table>
  <button>Save</button>
</section>

<section>
  <table>
    <thead>
      <tr>
        <th colspan="3">Section B</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>AA</td>
        <td>13</td>
        <td>SG</td>
      </tr>
      <tr>
        <td>BB</td>
        <td>16</td>
        <td>JP</td>
      </tr>
    </tbody>
  </table>
  <button>Save</button>
</section>
関連記事

javascript - リロードなしでajaxを使用してページを更新し、このページではPOST / GETを使用します

javascript - アプリケーション内の異なるモジュールのjavascriptおよびcssファイルを動的に変更する

javascript - Angular-leaflet-directiveカスタムHTMLポップアップ

javascript - スパンタグから値を変更するにはどうすればよいですか?

javascript - 他のdivを押し出さずに、ウィンドウのサイズ変更でdivを移動するにはどうすればよいですか?

javascript - AngularJS:サービスデータの取得

javascript - 入力まで待機するAngular JSバインディング

javascript - iFrameコンテキストでJavaScriptを実行する

javascript - ログイン後にバックボーンがuserinfoを送信しました

javascript - Node.jsのJavaScriptで別のオブジェクトをラップまたはプロキシする方法