將圖片拖到html表中

Question

所以在這個頁面的左邊我會有一個html表格，它已經有一個動態添加行的功能。在右邊，我想有一堆圖片可以拖動到html表格上，並且會觸發addRow（）函數向包含圖片中id的表添加新行。有人可以告訴我如何做到這一點？

編輯：（答案GrailsDev）

嗯，我沒有嘗試過，因爲我的研究是沒有定論。我敢肯定，我想要做這樣的事情：

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

在拖動將是格包裹的圖像，但是，我需要知道如何從圖片中獲得一些信息，把它變成下降功能。

Answer 1

好了，其基本思路是，你要在你的HTML一個tbody和thead，這樣有可能使tr標籤在tbody投擲的插槽，而頭不接受被拖動的圖象。然後，您在圖像draggable和tr標記行droppable元素接受img。

對於this working example in fiddle，我把ID放在第1行，標題標籤作爲名稱，圖像的副本作爲縮略圖。

這裏是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); 
});