Jquery Draggable不适用于附加表格行 [英] Jquery Draggable not working for appended table row

问题描述

我正在尝试使html表格行可拖动。它适用于目前的元素。在这里，我有一个按钮，其中有一个字段可以添加到表格中。这个新添加的字段应该作为行添加到html表格中，可拖动的类拖动不适用于新添加的字段。

HTML表格设计可拖动：

 < table id = drag_fields> 
 foreach（$ crmfields as $ row）{
 echo'< tr class =drag_row>'; 
 echo'< td id ='。$ row ['crm_field_id']。'>'。 $ row ['name']。 < / TD> \\\
; 
 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）。 （'table'）。attr（'id'）; 
 
}，
 stop：function（event，ui）{
 $（this）.css（'opacity '，'1'）; 
 
} 
}）; 
  

在另一个按钮操作中，我追加到html表中，这个新的附加的不拖动其他字段是正确拖动，

  $。ajax（{
类型：'POST'，
 url：'<< ;？php echo Yii :: app（） - > createUrl（baseContact / NewEditStructure）;？>'，
 data：data，
 success：function（data）{
 
 var obj = $ .parseJSON（data）; 
 / **在这里不拖动** / 
 $（'＃drag_fields'）。append（< tr class ='drag_row ui-draggable'>< td id =+ obj ['id'] +>+ obj ['name'] +< / td>< / tr>）; 
 $ b $，
 error：function（data）{//如果发生错误
 // alert（Prop Error occured.please try again）; 
 
} 
}）; 
  

解决方案

您必须在新添加的TR上初始化插件，插件不支持处理委托（AFAIK！）的任何方法。你可以找到一些解决方法，像下面这样委托mouseenter事件： （未测试过！）
$ b

DEMO

 < （$'（this）.data（'draggable'））
（'mouseenter'，'tr'，function（）{
）code> $（＃drag_fields $（this）.draggable（{...}）; 
}）; 
  

PS：您不应该添加 ui-draggable


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");

    }
  });

解决方案

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.

这篇关于Jquery Draggable不适用于附加表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！