javascript detect finger moved over a div

Question

I've gone through the suggested threads but appears this has not been posted before. The closest one is this but it requires to know the coordinates: Detect finger drag using Javascript on touch phones?

Suppose I have 3 <div style='float: left'></div> pairs:

<div id='Adiv' style='float: left'>A</div>
<div id='Bdiv' style='float: left'>B</div>
<div id='Cdiv' style='float: left'>C</div>

Instead of an onClick event on the divs, I want to detect how the user interacts with the buttons.

For example, if the user places a finger on A, then drags to B then drags to C, I want to output : ABC

And if the user places a finger on B, then drags to A then drags to C without lifting, I want to output : BABC.

Basically I would like to detect if a finger has moved/swiped his finger over a DIV then I would like to know it. Is this even possible?

Thanks for your guidance.

p/s This is for the mobile web browser, btw. Best,

Answer 1

It's a little bit tricky because you have no touchover event or similar.

So the solution is to detect the "touchover" by the elements "coords".

1. Wrap them with div (for example) and listen to him touchmove event.
2. Store the "coords" of the children (performance).
3. When touchmove on wrapper, get the x,y values from the event.
4. Check who from the children is in those values.

Now, to the code

// first - store the coords of all the cells for the position check
var matrix = $('.wrapper div').map(function() {
  var e = $(this),
      o = e.offset(),
      w = e.width(),
      h = e.height();

  return {
    top: o.top,
    left: o.left,
    right: o.left + w,
    bottom: o.top + h,
    e: e
  }
}).get();

var currentTarget = $(),
    activeTarget = $();


var touchF = function(e) {
  var touch = e.originalEvent.touches[0];
  currentTarget = getCurrent(
    {
      clientX: touch.clientX,
      clientY: touch.clientY
    }
  );

  // if the touch is in one of the cells and it's disfferent than the last touch cell
  if (currentTarget && currentTarget != activeTarget) {
    activeTarget = currentTarget;
    console.log(currentTarget.html());
    $('#output').append(currentTarget.html() + ' ');
  }
} 

$('.wrapper').bind({
  touchstart: touchF,
  touchmove: touchF
});

function getCurrent(touch) {
  // check if the touch coords are in the position of one of the cells and which one
  var a = matrix.filter(function(obj) {
    var b = (
      touch.clientX > obj.left &&
      touch.clientX < obj.right &&
      touch.clientY < obj.bottom &&
      touch.clientY > obj.top
    );

    return b;
  });

  return a.length > 0 ? a[0].e : null;
}

.wrapper:after {
  content:" ";
  display:table;
  clear:both;
}

.wrapper div {
  width:50px;
  height:50px;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id='Adiv' style='float: left'>A</div>
  <div id='Bdiv' style='float: left'>B</div>
  <div id='Cdiv' style='float: left'>C</div>
</div>
<hr />
<div id="output"></div>

http://jsbin.com/kokoxuwebi/edit?html,css,js