Javascript change color of div bg on touchmove event

Question

I have a 5*5 grid, what i want to do is to imitate drawing action than when i press(with my finger, it is suppose to be a mobile app) on a square it changes its background color. this part i have managed to do and it works fine.

what I would like to do now is that when I move the finger over the screen it will change the color of each of the squares my finger is pressing(enters its surface) just like drawing.

i know that there is a touchenter event but i don't understand how can i use it i read some tutorials and articles and everywhere it says that the touchenter event dosen't bubbles...

how can I get the id of the element that i am touchmove over?

https://jsfiddle.net/uLfm5szz/2/

any help will be more than great!

html

<div id="demo"></div>

css

.b{
    width: 50px; 
    height: 50px; 
    display: inline-block;
    border: red 1px solid;
}

js

createLoop();
$('.b').bind('touchmove',StartDragSelect);

function createLoop(){
    var length = 30;
    var text = "";
    var demo = $("#demo")
    for (i = 0; i < length; i++) {
     var rowElement = $('<div class="a"></div>');
     demo.append(rowElement);
        for(var x = 0; x < length; x++){
            createGridItem(rowElement,i,x);
        }
    }
}

function createGridItem(rootElement, i, x){
    var pix = 10;
    var currItem = $('<div class="b" id="a'+i+x+'" style="top:' + i*pix +'px; left: ' + x*pix +'px;  background-position-x: -' + x*pix +'px ; background-position-y:-' + i*pix +'px";"></div>');
    $(rootElement).append(currItem);
}

function StartDragSelect(obj)
{
    obj = obj.currentTarget;
    $(obj).css({"background-color":"blue"});    
}

look at this answer http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers — loli, Jun 26 '15 at 13:52
I didn't figure it all out but i think that because i am using a grid i will need a way to get the id of the square (div) I'm touchmoving/touchenter to. my question is how do i get the id? now i only get the id of the elemnt where the press begins — DavSev, Jun 26 '15 at 14:30
Did you try getting the coordinates from the touchmove, use this to find the cell at the current position and change its color — loli, Jun 26 '15 at 14:38
yes I did using the example on this link http://www.javascriptkit.com/javatutors/touchevents.shtml how do i link between the x n y position to the id of the element i enter to? — DavSev, Jun 27 '15 at 07:11
you calculate the positions, you don't enter the element. You calculate their position and look with the coordinates if you're above the element — loli, Jun 27 '15 at 11:49
how can i check if i am above the element? which parameter should i use to check it? — DavSev, Jun 29 '15 at 04:52

score 0 · Answer 1 · answered Jun 26 '15 at 13:53

0

Take a look at https://api.jquerymobile.com/swipe/

This is a jQuery lib for doing that.

answered Jun 26 '15 at 13:53

Filipe Merker

2,428
1
25
41

score 0 · Accepted Answer · answered Jun 29 '15 at 13:00

how can i check if i am above the element? which parameter should i use to check it?

Here is a function to get the position of an element(a gridview cell for you). With the x and y coordinates, you can add the height and width to them to calculate if your current touch position is above the element.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

To use this function you can do like this

  var y = getPosition(document.getElementById('cell1')).y;
  var x = getPosition(document.getElementById('cell1')).x;

Javascript change color of div bg on touchmove event

2 Answers2