環境
オブジェクトのさまざまな種類または状態を表す可能性のある列ヘッダーを含む < table > があります (たとえば、動物または人であるとしましょう)。行ヘッダーは、オブジェクトのいくつかの特性を表します。
ページの別の div には、インスタンスのリストがあります (動物や人を表すものもあります)。ドラッグ アンド ドロップ (JQuery を使用) を使用して、それらをテーブルのセルに配置します。< div> が < td> にドロップされた後、ページを離れる (フォームを送信する) まで、別の < td > にドラッグすることができます (間違えて配置した場合)間違ったセル)。
問題
ここで、ドロップしたオブジェクトのサイズを変更して、隣接する行を埋めることができるようにしたいと考えています (たとえば、オブジェクトに複数の特性を与えるため)。また、サイズ変更アクションの後、オブジェクトは、新しいサイズ (特性を表す) を維持しながら、別のセルにドラッグ可能である必要があります。
サイズ変更アクションを処理して、やりたいことを行う方法が見つかりません。
どうすればhtml、javascript、Jqueryでそれを行うことができますか?
編集:私の現在のコードの例: http://jsfiddle.net/B99KY/13/ (jsがあまりきれいでない場合は申し訳ありません)。要素をドラッグできますが、サイズ変更アクションを処理して達成しようとしていることを実行する方法がわかりません。
var resizableHandler = {
handles: "s",
start: function(e, ui) {
console.log('resizing started');
},
resize: function(e, ui) {
},
stop: function(e, ui) {
console.log('resizing stopped');
}
}
たとえば、セル [charecteristic1, state1] に "instance 1" を配置し、その後、"instance 1" のサイズを変更して charecteristic2 と charecteristic3 を埋める場合、ニュース セルを完全に埋める "instance 1" が必要です (このタブの送信後に後で使用します)。