javascript - 在移动设备上 jQuery Touch 以随机顺序选择 div

Question

在移动设备上，我想选择特定的divwrttouch即。当用户点击时，first div这两个 div 都需要被选中。像老虎钳一样，顺序可以是随机的 1 3 2 4, 1 2 3 4touchmove3rd div

附图将提供更好的理解

1 3 2 选择

1 2 3 选择

我也jsfiddle为我所做的事情创造了同样的东西。你可以在jsfiddle检查它。我正在使用 jquery mobile 也尝试使用touch和touchmove事件，但它没有按照我的要求工作。

请帮助我，谢谢

Answer 1

它不是很清楚（对我来说）你想要什么。这是一个非常简单的尝试，可能会帮助您自己解决问题。

签出此片段

编辑：更新，现在也可以使用 (v)touchmove

$(function() {
  $(".section").on('vclick', function(e) {
    $('.logs').html('eventType: ' + e.originalEvent.type);
    $(this).addClass('green');
    toHighlightElements($(this), $(".section"));
  })

  $(".sections-wrapper").on('vmousemove', function(e) {
    $('.logs').html('eventType: ' + e.originalEvent.type);
    
    var $target;
    if(e.originalEvent.type === 'touchmove') {
      e.preventDefault();
      $target = getActiveElement($(".section"), e.clientX, e.clientY);
      if(typeof $target === 'undefined') {
        return;
      }
    }
    else {
      $target = $(e.target);
    }
    
    toHighlightElements($target, $(".section"));
  });
  
  function toHighlightElements($current, $overall) {
    for (var i = 0 ; i <= $current.index() ; i++) {
     $overall.eq(i).addClass('green');
    }
  }
  
  function getActiveElement($overallElements, x, y) {
      return $(document.elementFromPoint(x, y));
  }  
  
  $('.reset').click(function() {
    $(".section").removeClass('green');
  });
});

.section {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: grey;
}

.green {
  background-color: green !important;
}

.allowLeft {
  float: left;
}

.sections-wrapper {
  background: red;
  width: 105px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

<div class="sections-wrapper">

  <div class="section allowLeft">
    1
  </div>
  <div class="section allowLeft">
    2
  </div>

  <div class="section allowLeft">
    3
  </div>
  <div class="section allowLeft">
    4
  </div>
  
   <br style="clear: both" />
</div>
<br><br>
<button class="reset">
reset
</button>

<div class="logs">
</div>

还更新了您的 jsfiddle：https://jsfiddle.net/m03g52ah/12/