javascript - JS 在按下 Shift 时限制鼠标与轴的移动(对于可拖动元素)

Question

当按下 Shift 按钮时，我希望用户只能严格向上/向下或向左/向右移动鼠标。我当前的粗略想法是在按下 Shift 时拦截所有运动，并使用事件模拟来进一步传递所需的事件(仅包含所需的轴运动)。我使用 jQuery Draggable，所以其他想法是确定何时按下 Shift 并限制可拖动本身，但这可能需要研究可拖动代码，并且可能很耗时。有什么想法可以以更优雅的方式做到这一点吗？

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 });
}