Сенсорный запуск на одном элементе, перетаскивание, прикосновение к другому элементу

Question

У меня есть палитра цветов, который должен позволять выбирать два разных цвета одновременно; это должно работать так. коснитесь первого цвета -> перетащите на второй цвет -> отпустите палец на втором цвете. Проблема в том, что сейчас, когда я убираю палец с экрана, событие касания запускает первый цвет. Это работает хорошо с щелчками, хотя.

$('.single-color').on('mousedown touchstart', function(e) {
  e.preventDefault();
  var index = $(this).attr('data-index');
  $('#color1').val(index);
  $('#color1').attr('data-color', $(this).css('background-color'));
  console.log('touchstart - index: ' + $(this).attr('data-index'));
});

$('.single-color').on('mouseup touchend', function(e) {
  e.preventDefault();
  var index = $(this).attr('data-index');
  $('#color2').val(index);
  $('#color2').attr('data-color', $(this).css('background-color'));
  console.log('touchend - index: ' + $(this).attr('data-index'));
});

.colors {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.single-color {
  height: 50px;
  width: calc(50% - 10px);
  margin: 0 5px 5px 5px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="colors">
      
  <li class="single-color" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
    &nbsp;
  </li>

  <li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
    &nbsp;
  </li>

  <li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
    &nbsp;
  </li>

  <li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
    &nbsp;
  </li>

  <li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
    &nbsp;
  </li>

  <li class="single-color" data-color="#38889C" data-index="5" style="background-color: #38889C">
    &nbsp;
  </li>

  <li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
    &nbsp;
  </li>

</ul>

Чтобы воспроизвести проблему, посмотрите на приведенный выше фрагмент, установив область просмотра на iPhone6 ​​в инструменте Chrome Resposive, чтобы он имитировал прикосновения.

Answer 1

Я решил с помощью этого ответа: получить элемент под touchend

var $singleColors = $('.single-color');
$singleColors.on('mousedown touchstart', function(e) {
  e.preventDefault();
  var index = $(this).attr('data-index');
  $singleColors.removeClass('active1');
  $(this).addClass('active1');
  $('#color1').val(index);
  $('#color1').attr('data-color', $(this).css('background-color'));
  console.log('touchstart - index: ' + $(this).attr('data-index'));
});

$singleColors.on('mouseup touchmove', function(e) {
  e.preventDefault();
  var endTarget = document.elementFromPoint(
    e.originalEvent.touches[0].pageX,
    e.originalEvent.touches[0].pageY
  );
  var index = $(endTarget).attr('data-index');
  $singleColors.removeClass('active2');
  $(endTarget).addClass('active2');
  $('#color2').val(index);
  $('#color2').attr('data-color', $(endTarget).css('background-color'));
  console.log('touchend - index: ' + $(endTarget).attr('data-index'));
});

* {
  box-sizing: border-box;
}

.colors {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.single-color {
  height: 50px;
  width: calc(50% - 10px);
  margin: 0 5px 5px 5px;
  float: left;
}

.single-color.active1, .single-color.active2 {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="colors active2">
      
  <li class="single-color active1" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
    &nbsp;
  </li>

  <li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
    &nbsp;
  </li>

  <li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
    &nbsp;
  </li>

  <li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
    &nbsp;
  </li>

  <li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
    &nbsp;
  </li>

  <li class="single-color active1 active2" data-color="#38889C" data-index="5" style="background-color: #38889C">
    &nbsp;
  </li>

  <li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
    &nbsp;
  </li>

</ul>

Примечание. Этот скрипт больше не работает на рабочем столе. Работает только на сенсорных устройствах.