Jquery Datatable Drag And Drop A Column From One Table To Another

I am using: jquery.dataTables.js from: https://datatables.net I am trying to drag and drop a column from one table to another. EDIT: so basically what I want to do is: be able to

Solution 1:

I've already responded to this question here: How to drag and drop a column into another

Some changes to your code (a global MouseUp event and a MouseDown event for the second table):

var rowChache = [];

    function mouseUp(event) {
    var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('input.border-highlight');

    if (ctrl.length > 0 && rowCache.length > 0) {
      var el = rowCache[0];
      var data = el.row.data();

      if (data.length > 0) {
        ctrl.val(data[0].name);
        el.row.remove().draw();
      }
    }

    rowCache = [];
    $('#example tr td:nth-child(2) input').removeClass('border-highlight');
  }

table.on('mousedown', 'tbody tr', function() {
var $row = $(this);

var r = table.rows(function(i, data) {
  return data.name == $row.children().first().text();
});

if (r[0].length > 0) {
  $row.parents('table').find('tr').removeClass('highlight');
  $row.addClass('highlight');
  $('#example tr td:nth-child(2) input').addClass('border-highlight');
}

  rowCache.push({
    row: r
  });
});

Check also the link: http://jsfiddle.net/f7debwj2/47/

Solution 2:

Did you even try searching?

https://datatables.net/forums/discussion/30197/add-remove-table-rows-on-drag-and-drop-between-two-datatables

move rows between two datatables

https://gist.github.com/davemo/706167

drag n drop between two tables

Drag/drop between two datatables

The most important tidbit comes from the creator of datatables:

This is not a feature of DataTables, however, it should be quite possible using the API. Specifically I would suggest using row().remove() and row.add() to remove and add rows as required. The drag and drop code however would be external to DataTables.

You will either use https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API or do something in JS, and/or write the missing functionality into the API, but given the above links, you'll see how people have tackled the same problem you've described. Instead of rows, you'll do columns and I'm sure it can all be modified to do exactly what you want.

Solution 3:

This one looks like similar to: How to drag and drop a column into another

I have commented on the above post. See If you wanna take that approach.