JQuery Draggable not working for added table row
I am trying to make a html table row drag and drop. it works fine for the current element. Here I have one button that has fields to add to the table. this new added field needs to be added to the html table as a drag and drop class string not working for newly added fields.
Draggable HTML Table Construction:
<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 add to the html table, this new added not dragging other fields is being dragged correctly,
$.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");
}
});
source to share
You have to initialize the plugin on the newly added TRs, this plugin doesn't support any method of handling delegation (AFAIK!). You could find a workaround like delegating the mouseenter event like this: (not tested!)
DEMO
$("#drag_fields").one('mouseenter', 'tr', function(){
if(!$(this).data('draggable'))
$(this).draggable({...});
});
PS: you shouldn't add the class ui-draggable
to the added TRs by default. Add the plugin when initializing.
source to share
When you call draggable, it only activates for existing elements, so when you add elements dynamically, you must drag and drop on them as well.
Example:
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");
}
});
PS: You can use the opacity option to set the opacity for the dragged elements.
source to share