$(document).ready( function () {

  var dragSrc = null;  //Globally track source cell

  var cells = null;  // All cells in table

  var table = $('#example').DataTable({

    pageLength: 3,

    columnDefs: [ {

      targets: '_all',

      // Set HTML5 draggable for all cells

      createdCell: function (td, cellData, rowData, row, col) {

        $(td).attr('draggable', 'true');

      }

    } ],

    drawCallback: function () {

      // Apply HTML5 drag and drop listeners to all cells

      cells = document.querySelectorAll('#example td');

        [].forEach.call(cells, function(cell) {

          cell.addEventListener('dragstart', handleDragStart, false);

          cell.addEventListener('dragenter', handleDragEnter, false)

          cell.addEventListener('dragover', handleDragOver, false);

          cell.addEventListener('dragleave', handleDragLeave, false);

          cell.addEventListener('drop', handleDrop, false);

          cell.addEventListener('dragend', handleDragEnd, false);

        });

    }

  });

​

function handleDragStart(e) {

  this.style.opacity = '0.4';  // this / e.target is the source node.

  dragSrc = this;  // Keep track of source cell

​

  // Allow moves

  e.dataTransfer.effectAllowed = 'move';

  // Get the cell data and store in the transfer data object

  e.dataTransfer.setData('text/html', this.innerHTML);

}

​

function handleDragOver(e) {

  if (e.preventDefault) {

    e.preventDefault(); // Necessary. Allows us to drop.

  }

​

  // Allow moves

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

​

  return false;

}

​

function handleDragEnter(e) {

  // this / e.target is the current hover target.

  // Apply drop zone visual

  this.classList.add('over');

}

​

function handleDragLeave(e) {

  // this / e.target is previous target element.

  // Remove drop zone visual

  this.classList.remove('over');  

}

function handleDrop(e) {

  // this / e.target is current target element.

​

  if (e.stopPropagation) {

    e.stopPropagation(); // stops the browser from redirecting.

  }

​

  // Don't do anything if dropping the same column we're dragging.

  if (dragSrc != this) {

    // Set the source column's HTML to the HTML of the column we dropped on.

    dragSrc.innerHTML = this.innerHTML;

    // Set the distination cell to the transfer data from the source

    this.innerHTML = e.dataTransfer.getData('text/html');

​

    // Invalidate the src cell and dst cell to have DT update its cache then draw

    table.cell(dragSrc).invalidate();

    table.cell(this).invalidate().draw(false);

  }

​

  return false;

}

​

function handleDragEnd(e) {

  // this/e.target is the source node.

  this.style.opacity = '1.0';

  [].forEach.call(cells, function (cell) {

    // Make sure to remove drop zone visual class

    cell.classList.remove('over');

  });

}

​

​

​

} );