Как сделать растягивание как в excel для таблицы?

118

17 января 2021, 13:00

Есть простая таблица, нужно, чтобы при нажатии на поле, у него появлялась обвода и его можно было растянуть на другие поля (выше, ниже)

$(document).ready(function(){ 
 
	var id = 0,//id товара 
  		field = '';//Поле которое будем копировать 
 
  $('.what').change(function() { 
    id = $(this).data('id'); 
    field = $(this).data('field'); 
    console.log('Будем копировать поле '+field+' у товара '+id); 
    $('.block').each(function() { 
    	$(this).removeClass('active'); 
    }); 
    $(this).parent().find('.block').addClass('active'); 
  }); 
   
   
  $('body').on('mousedown', '.block.active', function(e){ 
 
  }); 
 
});

.what { 
  display: none; 
} 
.block { 
  border: 2px solid #fff; 
} 
.what:checked + .block { 
  border: 2px solid #80adff; 
  position: relative; 
} 
.block { 
  user-select: none; 
} 
.block.active:after { 
  position: absolute; 
  content: "+"; 
  bottom: -17px; 
  right: -10px; 
  font-size: 26px; 
  font-weight: 600; 
  cursor: crosshair; 
}

<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> 
          </tr> 
        </thead> 
        <tbody> 
          <tr> 
            <th scope="row">1</th> 
            <td> 
              <input type="radio" class="what" name="what" id="prod1" data-id="1" data-field="title"> 
              <div class="block"> 
                <label for="prod1">Name</label> 
              </div> 
            </td> 
          </tr> 
          <tr> 
            <th scope="row">2</th> 
            <td> 
              <input type="radio" class="what" name="what" id="prod2" data-id="2" data-field="title"> 
              <div class="block"> 
                <label for="prod2">Name</label> 
              </div> 
            </td> 
          </tr> 
          <tr> 
            <th scope="row">3</th> 
            <td> 
              <input type="radio" class="what" name="what" id="prod3" data-id="3" data-field="title"> 
              <div class="block"> 
                <label for="prod3">Name</label> 
              </div> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
  </div> 
 
   
</div>

Решил сделать для каждого столбика свои скрытые radio, при нажатии на поле, выбирается radio и думал + еще добавить всем по checkbox, чтобы когда выбран radio и при перемещении на какое поле наводишь, тот checkbox выбирается

Сейчас столкнулся с проблемой, не получается сделать перемещение, не понимаю как сделать, чтобы при нажатии на + его можно было протащить по полям выше или ниже.
Не знаю как это реализовать

upd-- Нужно получить аналог растяжки как в excel, то есть выбираешь поле, растягиваешь ее по другим полям и значение выбранного поля присваивается всем выбранным. На данный момент я получил атрибут id и field выбранного поля, при растяжке нужно получить все id выбранных полей.

Потом обрабатывает сервер и отдает ответ обратно, при успехе заменяя значения(К этому этапу вопросов нет)

Вариант без input, сделал выделение поля, не могу понять как сделать само растягивание, то есть чтобы при нажатии на плюс js отлавливал нажатие и видел, что его тянут и проверял над каким полем сейчас находится этот курсор + его выделял(поле) Не много дополнил код

$(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) { 
      var id = $(this).parent().parent().data('id');//Получаем data-id выбранного поля 
      $('td').each(function() {//перебираем все имеющиеся поля 
        if ($(this).filter(":hover").length == 0 || $(this).data('id') == id) {//Проверяем если мышка не навидена на поле или ее равено выбранному id 
          $(this).css({ 
            'border': '1px solid #dee2e6' //делаем стандартную обводку 
          }); 
        } else { 
          $(this).css({ 
            'border': '1px solid'//Если мышка навидена и ид не равен выбранному, то обводим черным 
          }); 
        } 
      }), (id); 
    }); 
 
  }); 
 
});

td { 
  position: relative; 
  user-select: none; 
  border: 1px solid rgb(222, 226, 230); 
} 
 
.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; 
}

<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>