Jquery Draggable not working for appended table row

Question

I am trying to make a html table row draggable. it works fine for present element. Here i have one button which has fields to add in a table. this new added field should be appended to html table as row with draggable class drag not working for the newly appended fields.

HTML Table Design Draggable:

<table id=drag_fields >
     foreach($crmfields as $row ) {                                         
        echo '<tr class="drag_row">';                       
        echo '<td  id="'.$row['crm_field_id'] . '">' . $row['name'] . "</td>\n";    
        echo '</tr>';   

     }


</table>

Jquery Draggable code:

 $("#drag_fields tr").draggable({
         helper: 'clone',
         revert: 'invalid',
         cursor: "move",
         start: function (event, ui) {

         $(this).css('opacity', '.5');
          //   sourceElement = $(this).closest('table').attr('id');

         },
         stop: function (event, ui) {
           $(this).css('opacity', '1');

         }
     });

In another button action , I am appending to the html table, this new appended not dragging other fields are dragging properly,

$.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createUrl("baseContact/NewEditStructure"); ?>',
        data:data,
        success:function(data){ 

          var obj = $.parseJSON(data); 
     /** Appending <tr> here not dragging **/
            $('#drag_fields').append("<tr class='drag_row ui-draggable'> <td id= "+obj['id']+"> "+obj['name']+"</td></tr>");            

       },
      error: function(data) { // if error occured
         //alert("Prop Error occured.please try again");

    }
  });

Answer 1

You have to initialize plugin on new added TRs, this plugin doesn't support any method to handle delegation (AFAIK!). You could find some workaround thought as delegating mouseenter event like this: (not tested!)

DEMO

$("#drag_fields").one('mouseenter', 'tr', function(){
    if(!$(this).data('draggable')) 
       $(this).draggable({...});
});

PS: you shouldn't add ui-draggable class on added TRs by default. When initialized, plugin add it.

Answer 2

When you call draggable, it is enabled only for present elements so when you add items dynamically you must call draggable on them too.

Ex:

var draggable_opts = {
     helper: 'clone',
     revert: 'invalid',
     cursor: "move",
     start: function (event, ui) {

     $(this).css('opacity', '.5');
      //   sourceElement = $(this).closest('table').attr('id');

     },
     stop: function (event, ui) {
       $(this).css('opacity', '1');

     }
 };

 $.ajax({
    type: 'POST',
    url: '<?php echo Yii::app()->createUrl("baseContact/NewEditStructure"); ?>',
    data:data,
    success:function(data){ 

      var obj = $.parseJSON(data);
      var newRow = $("<tr class='drag_row ui-draggable'> <td id= "+obj['id']+"> "+obj['name']+"</td></tr>").draggable(draggable_opts);
        $('#drag_fields').append(newRow);            

   },
   error: function(data) { // if error occured
     //alert("Prop Error occured.please try again");
   }
});

P.S: You can use the opacity option to set opacity for dragged elements.