画像をhtmlテーブルにドラッグ

Question

このページの左側には、すでに動的に行を追加する機能を持つhtmlテーブルがあります。右側には、htmlテーブルにドラッグできる写真がたくさんあります。これは、addRow（）関数をトリガして、ピクチャのIDを含むテーブルに新しい行を追加します。誰かがこれを達成する方法を教えてもらえますか？

EDIT：（GrailsDevへの答え）

私の研究は決定的ではなかったので、まあ、私はまだ試していません。しかし、私はそのドロップにそれを置くために、画像からいくつかの情報を取得する方法を知っておく必要があり、

$("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } }); 

ドラッグ可能なイメージを包むDIV次のようになります。私はこのような何かをしたいと確信しています関数。

Answer 1

わかりましたので、基本的な考え方は、ヘッダーがドラッグされている画像を受け入れることはありませんしながら、それはtbodyドロップ可能なスロットにtrタグを作ることが可能だそのように、あなたのhtmlでtbodyとtheadをお勧めしますということです。次に、画像draggableとdroppable要素のimgを受け入れる行のtrタグを作成します。 this working example in fiddleについて

は、I行1にIDを入れ、名前としてのタイトルタグ、サムネイルなどの画像のコピー。ここで

は、それが実行して取得するjQueryのコードです：

jQuery(function($) { 
    $('#rightcol img').draggable({ 
     helper: 'clone' 
    }); 

    var dropProps = { 
     accept: "img", 
     activeClass: 'active', 
     hoverClass: 'hover', 
     drop: function(ev, ui) { 
      console.log(ui); 
      var $im = $(ui.draggable); 
      var $row = $('<tr />').append(
       $('<td />').html($im.attr('id')) 
      ).append(
       $('<td />').html($im.attr('title')) 
      ).append(
       $('<td />').append($im.clone().attr('id', null)) 
      ).droppable(dropProps); 
      $(this).after($row); 
     } 
    }; 

    $('#leftcol table tbody tr').droppable(dropProps); 
});