Akash Kumar Akash Kumar - 6 months ago 15
Javascript Question

Change background & color ontouchmove

I have a wordBox Where user will drag touch and drag to select words.

WordBox

I am using

touchmove
eventlistener to change background/color of the word in wordBox. But
touchmove
only changing color/background of the text from where it started.



var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];

var wordLength = word.length;



var spans = document.getElementsByTagName("span");


function select(evt) {
var id = this.id;
document.getElementById(this.id).style.background = "#ffffff";
document.getElementById(this.id).style.color = "#0070C4";

for (var i = 0; i < spans.length; i++) {
mouseMove = spans[i].addEventListener("touchmove", function(sp) {

document.getElementById(sp.toElement.id).style.background = "#ffffff";
document.getElementById(sp.toElement.id).style.color = "#0070C4";

});
}
}



function start() {
//GENERATE RANDOM WORDBOX
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchmove", select);
}
}

start();

html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}

<div id="wordBox">
<div class="column1">
<span id='r1'></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>





JSFIDDLE

I also tried mouse events but getting desired results. How can i achieve this?

Answer

Use Document.elementFromPoint() with clientX and clientY to select the current element

The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.

var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
var started = false;

function clearAll() {
  started = true;
  for (var i = 0; i < spans.length; i++) {
    spans[i].style.background = "";
    spans[i].style.color = "";
  }
}

function select(e) {
  e.preventDefault();
  if (started) {
    var changedTouch = e.changedTouches[0];
    var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
    if (elem.tagName === 'SPAN') { //this condition could also be more accurate based on your specificity of the element
      elem.style.background = "#ffffff";
      elem.style.color = "#0070C4";
    }
  }
}

function mouseMoveHandler(e) {
  e.preventDefault();
  if (started) {
    this.style.background = "#ffffff";
    this.style.color = "#0070C4";
  }
}

function reset() {
  started = false;
}

function start() {
  for (var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
    spans[i].addEventListener("touchstart", clearAll);
    spans[i].addEventListener("mousedown", clearAll);
    spans[i].addEventListener("touchmove", select);
    spans[i].addEventListener("mousemove", mouseMoveHandler);
    spans[i].addEventListener("touchend", reset);
    spans[i].addEventListener("mouseup", reset);
  }
}
start();
html {
  background: #0070C4;
  color: #fff;
}
span {
  padding: 8px 6px;
}
<div id="wordBox">
  <div class="column1">
    <span id='r1'>></span>
    <span id='r2'>></span>
    <span id='r3'>></span>
    <span id='r4'>></span>
    <span id='r5'>></span>
    <span id='r6'>></span>
    <span id='r7'>></span>
    <span id='r8'>></span>
    <span id='r9'>></span>
    <span id='r10'>></span>
    <span id='r11'>></span>
    <span id='r12'>></span>
    <span id='r13'>></span>
    <span id='r14'>></span>
    <span id='r15'>></span>
    <span id='r16'>></span>
    <span id='r17'>></span>
    <span id='r18'>></span>
    <span id='r19'>></span>
    <span id='r20'>></span>
  </div>
  <div class="column2">
    <span id='r21'>></span>
    <span id='r22'>></span>
    <span id='r23'>></span>
    <span id='r24'>></span>
    <span id='r25'>></span>
    <span id='r26'>></span>
    <span id='r27'>></span>
    <span id='r28'>></span>
    <span id='r29'>></span>
    <span id='r30'>></span>
    <span id='r31'>></span>
    <span id='r32'>></span>
    <span id='r33'>></span>
    <span id='r34'>></span>
    <span id='r35'>></span>
    <span id='r36'>></span>
    <span id='r37'>></span>
    <span id='r38'>></span>
    <span id='r39'>></span>
    <span id='r40'>></span>
  </div>
  <div class="column3">
    <span id='r41'>></span>
    <span id='r42'>></span>
    <span id='r43'>></span>
    <span id='r44'>></span>
    <span id='r45'>></span>
    <span id='r46'>></span>
    <span id='r47'>></span>
    <span id='r48'>></span>
    <span id='r49'>></span>
    <span id='r50'>></span>
    <span id='r51'>></span>
    <span id='r52'>></span>
    <span id='r53'>></span>
    <span id='r54'>></span>
    <span id='r55'>></span>
    <span id='r56'>></span>
    <span id='r57'>></span>
    <span id='r58'>></span>
    <span id='r59'>></span>
    <span id='r60'>></span>
  </div>
  <div class="column4">
    <span id='r61'>></span>
    <span id='r62'>></span>
    <span id='r63'>></span>
    <span id='r64'>></span>
    <span id='r65'>></span>
    <span id='r66'>></span>
    <span id='r67'>></span>
    <span id='r68'>></span>
    <span id='r69'>></span>
    <span id='r70'>></span>
    <span id='r71'>></span>
    <span id='r72'>></span>
    <span id='r73'>></span>
    <span id='r74'>></span>
    <span id='r75'>></span>
    <span id='r76'>></span>
    <span id='r77'>></span>
    <span id='r78'>></span>
    <span id='r79'>></span>
    <span id='r80'>></span>
  </div>
  <div class="column5">
    <span id='r81'>></span>
    <span id='r82'>></span>
    <span id='r83'></span>
    <span id='r84'>></span>
    <span id='r85'>></span>
    <span id='r86'>></span>
    <span id='r87'>></span>
    <span id='r88'>></span>
    <span id='r89'>></span>
    <span id='r90'>></span>
    <span id='r91'>></span>
    <span id='r92'>></span>
    <span id='r93'>></span>
    <span id='r94'>></span>
    <span id='r95'>></span>
    <span id='r96'>></span>
    <span id='r97'>></span>
    <span id='r98'>></span>
    <span id='r99'>></span>
    <span id='r100'>></span>
  </div>
  <div class="column6">
    <span id='r101'>></span>
    <span id='r102'>></span>
    <span id='r103'>></span>
    <span id='r104'>></span>
    <span id='r105'>></span>
    <span id='r106'>></span>
    <span id='r107'>></span>
    <span id='r108'>></span>
    <span id='r109'>></span>
    <span id='r110'>></span>
    <span id='r111'>></span>
    <span id='r112'>></span>
    <span id='r113'>></span>
    <span id='r114'>></span>
    <span id='r115'>></span>
    <span id='r116'>></span>
    <span id='r117'>></span>
    <span id='r118'>></span>
    <span id='r119'>></span>
    <span id='r200'>></span>
  </div>
  <div class="column7">
    <span id='r201'>></span>
    <span id='r202'>></span>
    <span id='r203'>></span>
    <span id='r204'>></span>
    <span id='r205'>></span>
    <span id='r206'>></span>
    <span id='r207'>></span>
    <span id='r208'>></span>
    <span id='r209'>></span>
    <span id='r210'>></span>
    <span id='r211'>></span>
    <span id='r212'>></span>
    <span id='r213'>></span>
    <span id='r214'>></span>
    <span id='r215'>></span>
    <span id='r216'>></span>
    <span id='r217'>></span>
    <span id='r218'>></span>
    <span id='r219'>></span>
    <span id='r220'>></span>
  </div>
  <div class="column8">
    <span id='r221'>></span>
    <span id='r222'>></span>
    <span id='r223'>></span>
    <span id='r224'>></span>
    <span id='r225'>></span>
    <span id='r226'>></span>
    <span id='r227'>></span>
    <span id='r228'>></span>
    <span id='r229'>></span>
    <span id='r230'>></span>
    <span id='r231'>></span>
    <span id='r232'>></span>
    <span id='r233'>></span>
    <span id='r234'>></span>
    <span id='r235'>></span>
    <span id='r236'>></span>
    <span id='r237'>></span>
    <span id='r238'>></span>
    <span id='r239'>></span>
    <span id='r240'>></span>
  </div>
  <div class="column9">
    <span id='r241'>></span>
    <span id='r242'>></span>
    <span id='r243'>></span>
    <span id='r244'>></span>
    <span id='r245'>></span>
    <span id='r246'>></span>
    <span id='r247'>></span>
    <span id='r248'>></span>
    <span id='r249'>></span>
    <span id='r250'>></span>
    <span id='r251'>></span>
    <span id='r252'>></span>
    <span id='r253'>></span>
    <span id='r254'>></span>
    <span id='r255'>></span>
    <span id='r256'>></span>
    <span id='r257'>></span>
    <span id='r258'>></span>
    <span id='r259'>></span>
    <span id='r260'>></span>
  </div>
  <div class="column10">
    <span id='r261'>></span>
    <span id='r262'>></span>
    <span id='r263'>></span>
    <span id='r264'>></span>
    <span id='r265'>></span>
    <span id='r266'>></span>
    <span id='r267'>></span>
    <span id='r268'>></span>
    <span id='r269'>></span>
    <span id='r270'>></span>
    <span id='r271'>></span>
    <span id='r272'>></span>
    <span id='r273'>></span>
    <span id='r274'>></span>
    <span id='r275'>></span>
    <span id='r276'>></span>
    <span id='r277'>></span>
    <span id='r278'>></span>
    <span id='r279'>></span>
    <span id='r300'>></span>
  </div>
  <div class="column11">
    <span id='r301'>></span>
    <span id='r302'>></span>
    <span id='r303'>></span>
    <span id='r304'>></span>
    <span id='r305'>></span>
    <span id='r306'>></span>
    <span id='r307'>></span>
    <span id='r308'>></span>
    <span id='r309'>></span>
    <span id='r310'>></span>
    <span id='r311'>></span>
    <span id='r312'>></span>
    <span id='r313'>></span>
    <span id='r314'>></span>
    <span id='r315'>></span>
    <span id='r316'>></span>
    <span id='r317'>></span>
    <span id='r318'>></span>
    <span id='r319'>></span>
    <span id='r320'>></span>
  </div>
  <div class="column12">
    <span id='r321'>></span>
    <span id='r322'>></span>
    <span id='r323'>></span>
    <span id='r324'>></span>
    <span id='r325'>></span>
    <span id='r326'>></span>
    <span id='r327'>></span>
    <span id='r328'>></span>
    <span id='r329'>></span>
    <span id='r330'>></span>
    <span id='r331'>></span>
    <span id='r332'>></span>
    <span id='r333'>></span>
    <span id='r334'>></span>
    <span id='r335'>></span>
    <span id='r336'>></span>
    <span id='r337'>></span>
    <span id='r338'>></span>
    <span id='r339'>></span>
    <span id='r340'>></span>
  </div>
</div>

Fiddle Demo

Comments