title: Jquery Datatable drag and drop a column from one table to another
body: <p>I am using: jquery.dataTables.js from: <a href="https://datatables.net" rel="nofollow noreferrer">https://datatables.net</a></p>
  
  <p>I am trying to drag and drop a column from one table to another.</p>
  
  <p><strong>EDIT:</strong>
  so basically what I want to do is:</p>
  
  <ul>
  <li>be able to drag and drop the names from table 2 into column called <strong>name</strong> in the table above</li>
  <li>after drag and drop the name the same should disappear from the table 2.</li>
  </ul>
  
  <p><strong>case 2: if I add a new row</strong> using the button <strong>Add new Row</strong></p>
  
  <ul>
  <li>I need be able to drag a drop the names from table 2 into that column <strong>name</strong> too.</li>
  </ul>
  
  <p>so basically I want to do a drag and drop just in the column not in the row.</p>
  
  <p>I don't want create a new row just move the names from 1 table to another.</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p><strong>1- Can you drag/drop multiples values from Table #2 to Table #1?</strong> 
  no, the drag and drop will be possible just 1 by 1.
  The drag and drop will be just possible after the user clicks in edit or add a new  row.
  so I will be able to replace names drom table 2 into the column names table 1</p>
  
  <p><strong>2- If no, the value dragged shall then replace the value where it is dropped?</strong> 
  yes</p>
  
  <p><strong>3- If yes,how should it work? Adding new rows with the other values blank? 
  no row need be added, we just need replace the column name.</strong></p>
  
  <p><strong>how will works:</strong>
  so after click in edit or add new row i will be able to drag a name from table 2 into column in
  table 1.</p>
  
  <p><strong>few more resquests:</strong>
  if select the row in table 2, this row should be change the color, showing was selected. and in the table 1 column name where this need be dropped need to change the color to show the user can be dropped, after the user drop the color should back to normal.</p>
  
  <p>sample working here:
  <a href="http://plnkr.co/edit/6sbmBzbXDzm4p6CjaVK0?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/6sbmBzbXDzm4p6CjaVK0?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   $(document).ready(function() {
   var dataUrl = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
  var options = [
    { key : 'option 1', value : 1 },
    { key : 'option 2', value : 2 },
    { key : 'option 3', value : 3 }
  ];
  
  $(document).ready(function() {
    var $table = $('#example');
    var dataTable = null;
  
    $table.on('mousedown', 'td .fa.fa-minus-square', function(e) {
      dataTable.row($(this).closest("tr")).remove().draw();
    });
  
    $table.on('mousedown.edit', 'i.fa.fa-pencil-square', function(e) {
      enableRowEdit($(this));
    });
  
    $table.on('mousedown', 'input', function(e) {
      e.stopPropagation();
    });
  
    $table.on('mousedown.save', 'i.fa.fa-envelope-o', function(e) {
      updateRow($(this), true); // Pass save button to function.
    });
  
    $table.on('mousedown', '.select-basic', function(e) {
      e.stopPropagation();
    });
  
    dataTable = $table.DataTable({
      ajax: dataUrl,
      rowReorder: {
        dataSrc: 'order',
        selector: 'tr'
      },
      columns: [{
        data: 'order'
      }, {
        data: 'name'
      }, {
        data: 'place'
      }, {
        data: 'delete'
      }]
    });
  
    $table.css('border-bottom', 'none')
          .after($('&lt;div&gt;').addClass('addRow')
            .append($('&lt;button&gt;').attr('id', 'addRow').text('Add New Row')));
  
    // Add row
    $('#addRow').click(function() {
      var $row = $("#new-row-template").find('tr').clone();
      dataTable.row.add($row).draw();
      // Toggle edit mode upon creation.
      enableRowEdit($table.find('tbody tr:last-child td i.fa.fa-pencil-square'));
    });
  
    $('#btn-save').on('click', function() {
      updateRows(true); // Update all edited rows
    });
  
    $('#btn-cancel').on('click', function() {
      updateRows(false); // Revert all edited rows
    });
  
    function enableRowEdit($editButton) {
      $editButton.removeClass().addClass("fa fa-envelope-o");
      var $row = $editButton.closest("tr").off("mousedown");
  
      $row.find("td").not(':first').not(':last').each(function(i, el) {
        enableEditText($(this))
      });
  
      $row.find('td:first').each(function(i, el) {
        enableEditSelect($(this))
      });
    }
    
    function enableEditText($cell) {
      var txt = $cell.text();
      $cell.empty().append($('&lt;input&gt;', {
        type : 'text',
        value : txt
      }).data('original-text', txt));
    }
  
    function enableEditSelect($cell) {
      var txt = $cell.text();
      $cell.empty().append($('&lt;select&gt;', {
        class : 'select-basic'
      }).append(options.map(function(option) {
        return $('&lt;option&gt;', {
          text  : option.key,
          value : option.value
        })
      })).data('original-value', txt));
  }
  
    function updateRows(commit) {
       $table.find('tbody tr td i.fa.fa-envelope-o').each(function(index, button) {
        updateRow($(button), commit);
      });
    }
  
    function updateRow($saveButton, commit) {
      $saveButton.removeClass().addClass('fa fa-pencil-square');
      var $row = $saveButton.closest("tr");
  
      $row.find('td').not(':first').not(':last').each(function(i, el) {
        var $input = $(this).find('input');
        $(this).text(commit ? $input.val() : $input.data('original-text'));
      });
  
      $row.find('td:first').each(function(i, el) {
        var $input = $(this).find('select');
        $(this).text(commit ? $input.val() : $input.data('original-value'));
      });
    }
  });
  
   $(document).ready(function() {
        var url = 'http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2';
        table = $('#example2').DataTable({
          ajax: url,
          order: [[ 0, "desc" ]],
          rowReorder: {
            dataSrc: 'place',
            selector: 'tr'
          },
          columns: [ {
            data: 'name'
          }]
        });
  
      }); 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> div.addRow {
        line-height: 45px;
        background-color: #fff;
        padding-left: 10px;
        border-bottom: 1px solid;
        border-top: 1px solid #e5e5e5;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.rawgit.com/DataTables/RowReorder/ce6d240e/js/dataTables.rowReorder.js"&gt;&lt;/script&gt;
  &lt;link href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" /&gt;
  &lt;link href="//cdn.datatables.net/rowreorder/1.2.0/css/rowReorder.dataTables.min.css" rel="stylesheet"/&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  
   &lt;table id="example" class="display" width="100%" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;order&lt;/th&gt;
        &lt;th&gt;name&lt;/th&gt;
        &lt;th&gt;country&lt;/th&gt;
        &lt;th&gt;action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;table id="new-row-template" style="display:none"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;999&lt;/td&gt; &lt;!-- Use a large number or row might be inserted in the middle --&gt;
        &lt;td&gt;__NAME__&lt;/td&gt;
        &lt;td&gt;__COUNTRY__&lt;/td&gt;
        &lt;td&gt;
          &lt;i class="fa fa-pencil-square" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;i class="fa fa-minus-square" aria-hidden="true"&gt;&lt;/i&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;div class="pull-right"&gt;
    &lt;button type="button" id="btn-cancel" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
    &lt;button type="button" id="btn-save" class="btn btn-primary" data-dismiss="modal"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;h1&gt;
   table 2
  &lt;/h1&gt;&lt;br&gt;
  &lt;br&gt;
  &lt;table id="example2" class="display" width="100%" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt; name&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;h1&gt;
   table 2
  &lt;/h1&gt;&lt;br&gt;
  &lt;br&gt;
  &lt;table id="example2" class="display" width="100%" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt; name&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>