Question

So on the left hand side of this page I will have an html table which already has a function to add rows dynamically. On the right hand side I would like to have a bunch of pictures that can be dragged onto the html table and that will trigger the addRow() function adding a new row into the table containing the id from the picture. Can someone please tell me how to accomplish this?

EDIT: (answer to GrailsDev)

Well I haven’t tried it yet because my research wasn’t conclusive. I’m sure I want to do something like this:

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

where the draggable would be the div encasing the images, however, I need to know how to get some information from the picture to put it into that drop function.

Answer 1

Okay, so the basic idea is that you’ll want a tbody and thead in your html, that way it’s possible to make tr tags in the tbody droppable slots while the header will not accept the images being dragged. Then you make the images draggable and the tr tags in the rows droppable elements that accept img.

For this working example in fiddle, I put the ID in row 1, the title tag in as the name, and a copy of the image in as a thumbnail.

Here is the jQuery code to get it running:

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