Как я могу уменьшить чувствительность при реагировании на события мыши при скольжении строк и столбцов?

Question

Давний тайник, редкий постер здесь. В последнее время я пытался разрабатывать «казуальные игры», и я, в частности, хотел что-то сделать с сетками и цветными плитками. У меня есть демонстрационный проект, над которым я работаю, под названием «Kolourz», в котором вы просто перемещаете строки и столбцы, пытаясь привести все цвета в ряд (или что-то еще; это глупая игра).

У меня все это работает нормально, но я сталкиваюсь с тем, что всякий раз, когда я удерживаю кнопку мыши и «провожу» в направлении, это дико увлекается перемещением плиток! Кажется, что влево или вправо немного больше контроля, чем вверх или вниз, но я думаю, что это только из-за ловкости рук.

Вот код для обнаружения событий мыши:

$('.tile').mousedown(function(e1){
   e1.preventDefault();

    $('.tile').on('mousemove', function (event) {
        if (event.buttons==1){
            let targetCell = event.target.id;
            console.log(targetCell);
        if (typeof(last_position.x) != 'undefined') {
            var deltaX = last_position.x - event.offsetX,
                deltaY = last_position.y - event.offsetY;
            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
                //left
                moveLeft(targetCell);
                targetCell="";
            } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
                //right
                moveRight(targetCell);
                targetCell="";
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
                //up
                moveUp(targetCell);
                targetCell="";
            } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
                //down
                moveDown(targetCell);
                targetCell="";                
            }

        }
        last_position = {
            x : event.offsetX,
            y : event.offsetY
        };
        }
    });

});     

  $('.tile').mouseup(function(){
    $(this).unbind("mousemove");
    $(this).unbind("mousedown");
});      

А вот код для ответа:

const moveRight = (rowCol) => {
    let tempId = rowCol.split("-");
    let row = tempId[0];

    let tempColor = $(`#${row}-7`).css('background-color');

    for (let i=colorArray.length;i>0;i--) {
        $(`#${row}-${i}`).css('background-color',$(`#${row}-${i-1}`).css('background-color'));
    }

    $(`#${row}-0`).css('background-color',tempColor);
}


const moveLeft = (rowCol) => {
    let tempId = rowCol.split("-");
    let row = tempId[0];

    let tempColor = $(`#${row}-0`).css('background-color');

    for (let i=0;i<colorArray.length-1;i++){
        $(`#${row}-${i}`).css('background-color',$(`#${row}-${i+1}`).css('background-color'));
    }

    $(`#${row}-7`).css('background-color',tempColor);
}

const moveUp = (rowCol) => {
    let tempId = rowCol.split("-");
    let col = tempId[1];

    let tempColor = $(`#0-${col}`).css('background-color');

    for (let i = 0; i< colorArray.length-1;i++) {
        $(`#${i}-${col}`).css('background-color',$(`#${i+1}-${col}`).css('background-color'));
    }

    $(`#7-${col}`).css('background-color',tempColor);
}

const moveDown = (rowCol) => {
    let tempId = rowCol.split("-");
    let col = tempId[1];

    let tempColor = $(`#7-${col}`).css('background-color');

    for (let i = colorArray.length-1;i>0;i--) {
        $(`#${i}-${col}`).css('background-color',$(`#${i-1}-${col}`).css('background-color'));
    }

    $(`#0-${col}`).css('background-color',tempColor);
}

Я просто взял кучу div, дал им идентификатор, соответствующий их строке и столбцу, затем, когда игрок «проводит пальцем» по строке, щелкая мышью и перетаскивая ее, вызывается функция перемещения этой строки. Эта функция анализирует идентификатор обратно в строки и столбцы и циклически изменяет цвета. Но он движется в сторону слишком быстро!

Я очень надеюсь, что вы, ребята, поможете мне отрегулировать эту вещь, потому что, хотя эта конкретная игра скучна и бессмысленна, возможно, я смогу использовать то же самое функциональность для создания чего-то крутого!

Вот живая версия игры

и

Вот репо с полным кодом