0

On Mobile device I want to select specific div w.r.t. touch ie. when user touch on first div and touchmove to 3rd div then these both div's need to be selected. Like vise the order can be random 1 3 2 4, 1 2 3 4

The attached image will give better understanding

1 3 2 Selection

1 3 2 Selection

1 2 3 selection

enter image description here

I have also created jsfiddle for the same with what I have done till. You can check it at jsfiddle. I am using jquery mobile also trying to use touch and touchmove events but it's not working as per my requirement.

Please help me in this, Thanks

mujaffars
  • 1,395
  • 2
  • 15
  • 35
  • Why you dont use `vclick/vmousemove` if you're using jquery-mobile? That handles both of event-types (desktop/mobile). The current type you can check in `originalEvent`. See your fiddle: https://jsfiddle.net/m03g52ah/7/ – pleinx Jun 29 '16 at 07:20
  • Thanks -- But it actually required to tap to each div. Didn't it work when we tap (touch) 1st div and touch-moved finger to 2nd and then 3rd div -- That actually need to highlight 1st 2nd and 3rd – mujaffars Jun 29 '16 at 07:28
  • Yes, sure, it was not the complete solution for your problem, just an attempt how you can solve it. :-) Count your `` and check which current `
    `is selected (touched). Now you can compare the `.index()` of your current target and the count of `
    `. Here you build a little logic which checks which element have to highlight and is already highlighted.
     – pleinx Jun 29 '16 at 07:34
  • Take a look here, its absolutly quick&dirty and should only give you a attempt to solve it yourself: https://jsfiddle.net/m03g52ah/11/ – pleinx Jun 29 '16 at 08:00

1 Answers1

0

Its not really clear (for me) what you want. Here is a really simple attempt for you which maybe will help your self to solve your issue.

Checkout this Snippet

EDIT: Updated, now works also which (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>

Updated also your jsfiddle: https://jsfiddle.net/m03g52ah/12/

pleinx
  • 616
  • 3
  • 8