JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Title</th>
          <th scope="col">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td data-id="1" data-field="title">
            <div id="active"><span>+</span></div>
            Name
          </td>
          <td data-id="1" data-field="price">
            10
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td data-id="2" data-field="title">
            Name
          </td>
          <td data-id="2" data-field="price">
            10
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td data-id="3" data-field="title">
            Name
          </td>
          <td data-id="3" data-field="price">
            10
          </td>
        </tr>
      </tbody>
    </table>
  </div>


</div>

CSS

td {
  position: relative;
  user-select: none;
}

.table {
  width: 98%;
}

#active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #8cafff;
}

#active span {
  position: absolute;
  right: -10px;
  bottom: -17px;
  font-size: 26px;
  cursor: crosshair;
  font-weight: 500;
  z-index: 1;
}

JavaScript

$(document).ready(function() {

  var id = 0, //id товара
    field = ''; //Поле которое будем копировать

  $('td').click(function() {
    id = $(this).data('id');
    field = $(this).data('field');
    var div = $('#active');
    $(this).prepend(div);
  });


  $('body').on('mousedown', '#active span', function(e) {
    if (e.which != 1) { // если клик правой кнопкой мыши
      return; // то он не запускает перенос
    }
  });

  $('body').on('mousemove ', '#active span', function(e) {

  });

});