Question

因此，在本页的左侧，我将有一个html表，它已经具有动态添加行的功能。在右侧，我想有一堆图片可以拖到html表上，这将触发addRow（）函数，在表中添加一个新行，其中包含图片中的id。有人可以告诉我如何做到这一点吗？

编辑:(回答GrailsDev）

嗯，我还没有尝试过，因为我的研究没有定论。我确定我想做这样的事情：

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

其中draggable将是包围图像的div，但是，我需要知道如何从图片中获取一些信息以将其放入drop功能。

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);
});

将图片拖到html表中

1 个答案: