將圖片拖到html表中

Question

因此，在此頁面的左側，我將有一個html表，該表已經具有動態添加行的功能。 在右側，我想有一堆可以拖到html表格上的圖片，這將觸發addRow（）函數，將新行添加到包含圖片ID的表格中。 有人可以告訴我如何做到這一點嗎？

編輯：（對GrailsDev的回答）

好吧，我還沒有嘗試過，因為我的研究還沒有定論。 我確定我想做這樣的事情：

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

可拖動的位置將是包圍圖像的div，但是，我需要知道如何從圖片中獲取一些信息以將其放入該放置函數中。

Answer 1

好的，所以基本的想法是，在HTML中需要一個tbody和thead ，這樣就可以在tbody可放置的插槽中制作tr標簽，而標題將不接受被拖動的圖像。 然后，使圖像draggable並在接受img droppable放置行元素中添加tr標簽。

對於fiddle中的這個工作示例 ，我將ID放在第1行，將title標簽作為名稱，並將圖像的副本作為縮略圖。

這是使其運行的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);
});