在移動設備jQuery Touch上以隨機順序選擇div

Question

在移動設備上，我想選擇特定的div wrt touch即。 當用戶觸摸first div並觸摸touchmove到3rd div touchmove ，則需要選擇這兩個格。 像老虎鉗一樣，順序可以是隨機的1 3 2 4，1 2 3 4

所附圖片將使您更好地理解

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/ ://jsfiddle.net/m03g52ah/12/