Событие перетаскивания мыши jQuery для добавления цвета?

Я новичок в программировании и только что создал Pixel Art Maker!

Я экспериментирую с jQuery и хочу знать: • существует подходящий метод события, который я могу вызвать, чтобы создать эффект для: «Если я щелкну и проведу мышью по определенным ячейкам, цвета ячеек изменятся».

В настоящее время моя таблица настроена так, чтобы вы щелкнули по ней один раз, она добавляет цвет, если вы щелкните ее второй раз, она удаляет цвет.

Я хотел бы, чтобы пользователь просто перетащил свою мышь, чтобы придать ей эффект, как будто они рисуют.

Я попытался реализовать с помощью mouseDown () и select (), но это не сработало.

Любая помощь в том, как я могу это реализовать, будет оценена. Еще лучше, если вы не дадите мне точный ответ сразу же, но дадите мне подсказки о том, какие методы событий jQuery и слушателей я должен использовать и где я бы поместил их в код, чтобы я мог учиться.

Спасибо всем!

Демо-версия Codepen: https://codepen.io/chaycesol/full/Qmmyjq

var height, width, color;
// When size is submitted by the user, call makeGrid()
$('#sizePicker').submit(function (event) {
  event.preventDefault();
  height = $('#inputHeight').val();
  width = $('#inputWeight').val();
  makeGrid(height, width);
});

function makeGrid(h,w) {
//Removes grid if one is already present before pressing submit  
$('tr').remove();

// Creating each table row
for (var i= 1; i <= h; i++) {
    $('#pixelCanvas').append('<tr id=table' + i + '></tr>');
    for (var j = 1; j <=w; j++) {
        $('#table' + i).append('<td></td>');
    }
}

//Draw with color in table cells
$('td').click(function addColor() {
    color = $('#colorPicker').val();

    if ($(this).attr('style')) {
        $(this).removeAttr('style')
    } else {
        $(this).attr('style', 'background-color:' + color);
    }
});