Drag n Drop Cell between 2 tables

Drag n Drop Cell between 2 tables

by Tim Cadieux

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">
<div class="col-md-6">
  <h2>Table 1</h2>
  <table class="dataTable" id="table1">
    <thead>
      <tr>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</div>
<div class="col-md-6" style="border-left: 2px solid #ADB2B5;">
  <h2>Table 2</h2>
  <table class="dataTable" id="table2">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Body</th>
      </tr>
    </thead>
  </table>
</div>

JavaScript

var t1 = $('#table1').DataTable({
    iDisplayLength: 5,
    select: {
      style: 'os',
      items: 'cell'
    },
    ajax: {
      url: 'https://api.myjson.com/bins/369lc',
      dataSrc: ''
    },
    //   data: data,
    columns: [{
      data: 'title'
    }]
  });
  var t2 = $('#table2').DataTable({
    select: {
      style: 'os',
      items: 'cell'
    },
    iDisplayLength: 5,
    ajax: {
      url: 'https://api.myjson.com/bins/369lc',
      dataSrc: ''
    },
    //   data: data,
    columns: [{
      data: 'id'
    }, {
      data: 'title'
    }, {
      data: 'body'
    }]
  });

  $('#table2 tbody').on('click', 'td', function() {
    for (i = 0; i < t1.rows()[0].length; i++) {
      if (t1.row(i).data()[0] != "" && $(t1.row(i).node()).find('td.selected').length) {
        var t1data = t1.row(i).data();

        var t2cell = t2.cell(this);
        //t2cell.data(t1data.title).draw();

        //Insert the data into my database.
        insertData(function(success) {
          if (success) {
            //Move the row.
            t2cell.data(t1data.title);

            //Re-draw the tables.
            t1.draw();
            t2.draw();
          } else {
            //Handle a failed insert.
            alert("Unable to insert data!");
          }
        });
      }
    }


  });

  function insertData(cb) {
    //Perform some AJAX.

    //Test a success.
    cb(true);

    //Test a Failure.
    //cb(false);

  }