CODEWITHSUNDEEP
jquerycssjquery-ui-sortabledrag
cafc
cafc

Reputation: 31

jquery get row that is being dragged/sortabled between tables

I have 2 tables and when I drag/sort one of rows to another table I need to get the tr dragged, to apply for instance some css style (in my case is to apply top row border using the class .newclass) or to get cells values, but I don't know how can I get the tr (the entire row) that is being dragged using jquery code. In my code I'm trying using the helper function to get the tr but so far with no success.

I have jsfiddle demo to show my code so far and for better understand my pb.

JSFIDDLE DEMO

my js code:

$(document).ready(function()
{


    $("tbody.connectedSortable").sortable({
            helper: 'original',
            revert: 'invalid',

             connectWith: ".connectedSortable" //,
         //helper: function() {

        //$('.connectedSortable').addClass('newclass'); // to put the top border on the fly, but doesn't works

                  //return $('<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>')

             //return  $("tbody#x").find("tr:gt(0)").text(); //it doesn't work!! How can I get the tr dragged??

            //}


        });

     $("tbody.connectedSortable").disableSelection();

     $( "#T2" ).droppable({
      accept: ".connectedSortable tr",

      drop: function( event, ui ) {

        return false;
      }

    });



});

Can anyone please help me on this.

Thanks on advance, Cafc

Upvotes: 0

Views: 2071

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can get the dropped element using ui.helper in the drop event and set the class to each children td elements.

Code:

$("#T2").droppable({
    accept: ".connectedSortable tr",

    drop: function (event, ui) {
        $(ui.helper).find("td").addClass("newclass");
        return false;
    }
});

Demo: http://jsfiddle.net/IrvinDominin/qtny1uy4/

UPDATE

You can use sort event to manipulate the sorted element during sorting, then reset it in the stop event.

Code:

$("tbody.connectedSortable").sortable({
    helper: 'original',
    revert: 'invalid',
    connectWith: ".connectedSortable",
    sort: function(event, ui) {
        $(ui.item).find("td").addClass("newclass");
    },
    stop: function(event, ui) {
        $(ui.item).find("td").removeClass("newclass");
    }        
});

Demo: http://jsfiddle.net/IrvinDominin/qtny1uy4/1/

Upvotes: 2

charlietfl
charlietfl

Reputation: 171679

When using jQuery UI option callbacks the second argument of callback ui is a big object with lots of data available pertaining to the whole widget and event instances.

It is always worth logging this object to console to see what it contains within various event callbacks.

For droppable if you want the draggable that was dropped you can access it as follows:

drop:function(evt,ui){

  var elementDropped = ui.draggable;
  alert('First item in the dropped row is ' + elementDropped .children(':first').text());
  console.log(ui); /* <=== have a good look at what's here*/

}

DEMO

Upvotes: 0

Related Questions