web-dev-qa-db-ja.com

jQueryのドラッグ可能なテーブル要素

jQueryのdraggable機能は、FF3またはSafariのテーブルでは機能しないようです。これがどのように機能するかを想像するのは少し難しいので、機能しないことはそれほど驚くことではありません。

<html>
  <style type='text/css'>
    div.table { display: table; }
    div.row { display: table-row; }
    div.cell { display: table-cell; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
  <script>
  $(document).ready(function(){
    $(".row").draggable();
  });
  </script>
  <body>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Foo</div>
        <div class='cell'>Bar</div>
      </div>
      <div class='row'>
        <div class='cell'>Spam</div>
        <div class='cell'>Eggs</div>
      </div>
    </div>
    <table>
      <tr class'row'><td>Foo</td><td>Bar</td></tr>
      <tr class='row'><td>Spam</td><td>Eggs</td></tr>
    </table>
  </body>
</html>

（w3c/HTML仕様の観点から）これが機能しない特定の理由があるかどうか、b）ドラッグ可能なテーブル行を取得するための正しい方法は何かと思っていました。

境界線の折りたたみと行の高さのアルゴリズムのため、私は実際のテーブルが好きです。

jquerycssdrag-and-drophtml-table
28
cdleary

本当に表形式のデータがある場合は、表をそのまま使用する必要があります。

そして、行をテーブル内にドラッグしたい場合、これJQuery + "ドラッグ可能な行テーブル"ライブラリFireFox3で完全に動作します

22
VonC

JQuery UIでもテーブルの行をドラッグ可能にする方法があります。あなたがする必要があるのは、ヘルパーオプションを、次のようにドラッグしている行をホストするテーブルを内部に持つ新しいdivを返す関数に設定することです：

helper: function(event){
return $('<div class="drag-cart-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},

ヒントについては、David PetersenへのThx： http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/

35
Ariel Popovsky

誰かが同じ間違いをした場合に備えて：

テーブル内のTRをドラッグして並べ替えられるようにするには、.draggableではなく.sortableが必要です。

私だけ？

11
Enigma Plus

これは少し遅いですが、今日見つけたhtml5 drag'n drop APIは<tr>要素で正常に動作します。 <tr draggable="true">を有効にして、イベントを登録するだけです

dragstart
drag
dragenter
dragleave
dragover
drop
dragend

この記事はとても役に立ちました http://www.html5rocks.com/en/tutorials/dnd/basics/

このhtml5 APIには、親要素のみに関心がある場合でも、子要素にカーソルを合わせるとイベントが発生するという欠陥があることに注意してください。 html5rocksの人々がすぐに修正することを願っています。

3
Rn2dy

私は次のJqueryUIを使用してこの作業を行いました。

$(function() {
  $(".sortable").sortable({
    revert: true
  });
});
table td {
  border: solid 1px black;
}
table {
  border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tbody class="sortable">
    <tr>
      <td>1</td>
      <td>One</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Two</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Three</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Four</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Five</td>
      <td>some text</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Six</td>
      <td>some text</td>
    </tr>
  </tbody>
</table>
1
sevmusic

Css tr.ui-draggable-dragging {display: block}を設定することもできます-この方法で行をドラッグできますが、それらの座標は正しく計算されません。この問題に対する適切な解決策はまだ見つかりません。

0
Andrei