javascript change bg color of element by touchenter 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 i that when i move the finger over the screen it will change the color of each of the squares my finger is pressing(entes 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...

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"});    
}