jQueryでテーブルの行をドラッグ

jQuery（とUI）を使用して、テーブルの行をテーブルからドラッグしていくつかの要素にドロップできます。複数の選択した曲をドラッグするときのiTunesの動作と同様に、行自体はテーブルから離れるべきではありません。私は表を使用する必要があります。これは表形式のデータであり、すでにテーブルソートのプラグインが用意されています。jQueryでテーブルの行をドラッグ

どのようにこれを達成するためのアイデアですか？

出典

2009-08-23 mikeycgto

これを実現するためのjQueryプラグインがあります。 http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/ – mikeycgto

を参照してくださいこれは古い投稿ですが、tnd tableプラグインはtheadとtbodyは、ヘッダー行を無視したい。いくつかの人々が分岐バージョンを書いています。リンクしたtndのコメントにリンクされている1つのバージョンは、実際にはプロッパフォーマットのテーブルで動作します。欠点は、すべての私のドロップダウンを無効にすることだけです。あなたのテーブルに何もコントロールがない場合、分岐バージョン 'http：// riouxsvn.com/svn/jquery-tablednd/trunk /'は実際にうまくいくようです。プロジェクトは現在GitHubの 'https：// github.com/isocra/TableDnD /'にもありますが、最新のものではありません。 – Nope

JQuery UIのdroppable（）は、許容されるdraggable（）がそのdroppable（）にドロップされるたびに実行する関数を定義します。 this pageのデモは、コード化の仕方を理解するのに役立ちました。「ソースを表示」をクリックしてコードを見てください。特にこの部分：

$gallery.droppable({ 
    accept: '#trash li', 
    activeClass: 'custom-state-active', 
    drop: function(ev, ui) { 
    recycleImage(ui.draggable); 
    } 
});

は、次の例のように、あなたがしたい行のクローンを作成するには、ドロップ機能を作成することができますが、元の場所からそれを削除しないでください。

出典

2009-08-23 14:33:58

ええ、その払拭可能な面は問題ではありません。テーブルの外にテーブル行をドラッグ可能にすることはできません。 – mikeycgto

プレーンJavaScriptで書かれたこのプラグインを試して、行と列をドラッグアンドソートすることができます。 https://sindu12jun.github.io/table-dragger/

出典

2016-12-22 07:47:20 markjiang

jQueryでテーブルの行をドラッグ

答えて

関連する問題