Question

我正在尝试使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>\n";    
        echo '</tr>';   

     }


</table>

Jquery Draggable代码：

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

         }
     });

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

$.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

当您调用draggable时，它仅对当前元素启用，因此当您动态添加项目时，您也必须在它们上调用draggable。

例如：

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：您可以使用不透明度选项为拖动的元素设置不透明度。

Answer 2

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

DEMO

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

PS：默认情况下，不应在添加的TR上添加ui-draggable类。初始化时，插件添加它。

Jquery Draggable不适用于附加表行

2 个答案:

DEMO