jQuery Datatables删除行不适用于拖放

Question

我正在使用： https ://datatables.net的jquery.dataTables.js

我的删除按钮不起作用，我想知道我在做什么错。

如果我删除了拖放功能，则按钮可以正常工作。

有人知道我做错了吗？

jsfiddle： http : //jsfiddle.net/f7debwj2/24/

 rowReorder: {
      dataSrc: 'order',
      selector: 'tr',
    },

如果我删除selector: 'tr' ，效果很好，但是我不能，因为整行都需要拖动

HTML：

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>order</th>
      <th>name</th>
      <th>country</th>
      <th>action</th>
    </tr>
  </thead>
</table>

jQuery的

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/bQzyuEGndu?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    rowReorder: {
      dataSrc: 'order',
      selector: 'tr',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'place'
    }, {
      data: 'name'
    }, {
      data: 'delete'
    }],
    "fnDrawCallback": function(oSettings) {
      $("i.fa.fa-minus-square").click(function(event) {
        $(this).closest("tr").remove();
      });
    }
  });
});

Answer 1

看起来rowReorder插件涵盖了“ mousedown”事件，该事件在“ click”事件之前，并阻止了其他任何处理程序。 来自https://cdn.datatables.net/rowreorder/1.2.0/js/dataTables.rowReorder.js ：

$(dt.table().container()).on( 'mousedown.rowReorder touchstart.rowReorder', this.c.selector, function (e) {
            if ( ! that.c.enabled ) {
                return;
            }

            var tr = $(this).closest('tr');

            // Double check that it is a DataTable row
            if ( dt.row( tr ).any() ) {
                that._mouseDown( e, tr );
                return false;
            }
        } );

        dt.on( 'destroy.rowReorder', function () {
            $(dt.table().container()).off( '.rowReorder' );
            dt.off( '.rowReorder' );
        } );

Answer 2

通过对rowReorder.js进行很小的修改，我设法使其正常运行，希望它不会有任何其他后备。

我将第182行中的rowReorder.js文件更改为： return false; return;

为什么？ 因为Jquery具有以下代码：

ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
                        handleObj.handler ).apply( matched.elem, args );

                    if ( ret !== undefined ) {
                        if ( ( event.result = ret ) === false ) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                    }

当return false; ret值为false ，代码为：

event.preventDefault();
event.stopPropagation();

正在执行。 event.stopPropogation从事件停止到冒泡，这将导致“ mousedown ”事件无法正常工作。

当我们只使用return; 条件不成立，并且事件没有停止传播，因此可以在此演示： 工作演示中看到它的运行。