JS restringe el movimiento del mouse con el eje cuando se presiona la tecla Mayús (para el elemento que se puede arrastrar)

Cuando se presiona el botón de cambio, quiero que el usuario pueda mover el mouse únicamente hacia arriba / abajo o hacia la izquierda / derecha. Mi idea aproximada actual es interceptar todos los movimientos cuando se presiona la tecla Mayús y usar la simulación de eventos para pasar el evento necesario (que contendrá solo el movimiento del eje necesario). Utilizo jQuery Draggable, así que otra idea es determinar cuándo se presiona la tecla shift y restringir el arrastre en sí mismo, pero esto puede requerir investigar un código que se pueda arrastrar y puede llevar mucho tiempo. ¿Alguna idea de cómo hacerlo de una manera más elegante?

Resuelto aplicando restricciones arrastrables (probado solo en 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 }); }