Javascript onmousemove 和 onclick

Question

我想在单击鼠标时更改背景颜色并可以移动它的元素，这样您就不必单击每个元素但可以使用鼠标“绘制”。但我不知道怎么做。我现在的代码就像

function change_color(x, y) {

  console.log(x, y);

  var elem = document.getElementById(x.toString() + "-" + y.toString());

  if (elem.style.backgroundColor == 'white')

    elem.style.backgroundColor = 'black';

  else

    elem.style.backgroundColor = 'white';

}

#board td {

  /*border: 1px solid rgb(175, 216, 248);*/

  width: 25px;

  height: 25px;

  border: 1px solid black;

  background-color: white;

}

<table id="board">

  <tr>

    <td id='0-0' onmousedown="change_color(0,0);"></td>

    <td id='0-1' onmousedown="change_color(0,1);"></td>

  </tr>

  <tr>

    <td id='1-0' onmousedown="change_color(1,0);"></td>

    <td id='1-1' onmousedown="change_color(1,1);"></td>

  </tr>

</table>