Passing DOM attributes to JQuery

[nonshatter]

Hi there,

I am in the process of implementing draggable/droppable interaction using the JQuery UI. This is something that I have very little experience with so please be gentle.

I can drag and drop using <tr> elements which looks great, but I need to get the <tr> attributes (perl variables) into jquery so that I can pass some variables to AJAX to process the data.

Previously, I would use the onClick event handler and use the 'this' keyword to get the element attributes. However, with JQuery, the function is called when I start dragging the rows:

<script>
$(function() {


        $( ".draggable" ).draggable({
                cursor: 'move',
                containment: 'document',
                helper: myHelper
        });
        $( ".droppable" ).droppable({
                drop: function( event, ui ) {
                $( this )
                       .addClass( "ui-state-highlight" )
                       .find( "p" )
                       .html( "Dropped!" );
                }
        });
});

function myHelper( event ) {
        return '<div id="draggableHelper">Want to display the ID and Title here</div>';
}

</script>

and the <TR> elements are populated using Perl/DBI in a loop:

while (scalar @q > 0)
{
    print "<tr class='draggable' class='ui-widget-content' req_id='$req_id' req='$req_tag'><td>$req_id</td><td>$req_tag</td></tr>";
}

So my question is how to pass the req_id and req_tag variables into the jquery helper function.

Thanks,
ns

[nonshatter]

Got it...

function myHelper( event ) {
        var id = this.getAttribute("req_id");
        var div = "<div class='draggableHelper'>"+  id +"</div>";
        return div;
}

<tr class='draggable' class='ui-widget-content' req_id='$req_id' req='$req_tag' onChange='myHelper(this);'><td>$req_id</td><td>$req_tag</td></tr>