JS ограничивает движение мыши с осью при нажатии Shift (для перетаскиваемого элемента)

Question

Когда нажата кнопка Shift, я хочу, чтобы пользователь мог только перемещать мышь строго вверх / вниз или влево / вправо. Моя текущая грубая идея состоит в том, чтобы перехватывать все движения при нажатии Shift и использовать имитацию событий для дальнейшей передачи необходимого события (которое будет содержать только необходимое движение оси). Я использую jQuery Draggable, поэтому другая идея состоит в том, чтобы определить, когда нажат Shift, и ограничить сам Draggable, но это может потребовать изучения перетаскиваемого кода и может занять много времени. Есть идеи, как сделать это более элегантно?

Answer 1

Решено с применением перетаскиваемых ограничений (проверено только в FF):

     function applyDragRestriction(event, prevPosition) {
            if ($( ".componentPlaced" ).draggable( "option", "axis" )) return;
            if (Math.abs(event.clientX - prevPosition.x) < Math.abs(event.clientY - prevPosition.y)) {
                $('.componentPlaced').draggable({ axis: 'y' });
            } else {
                $('.componentPlaced').draggable({ axis: 'x' });
            }
        }

    function applyShiftHandler(event) {
        if (isShiftDown) applyDragRestriction(event, oldMousePositions);
        oldMousePositions = {x: event.clientX, y: event.clientY};
    }

    function checkShiftDown(event) {
        if (event.keyCode == KeyEvent.DOM_VK_SHIFT) {
           isShiftDown = true;
        }
    }

    function checkShiftUp(event) {
        if (event.keyCode == KeyEvent.DOM_VK_SHIFT) {
            cancelDragRestriction();
            isShiftDown = false;
        }
    }

function cancelDragRestriction() {
    $('.componentPlaced').draggable({ axis: null });
}