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:

$(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>';


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.


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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.