当按下换档时，JS限制鼠标移动轴（对于可拖动元素）

当按下换档按钮时，我希望用户只能向上/向下或向左/向右移动鼠标。 我目前的粗略想法是在按下换档时拦截所有动作，并使用事件模拟来进一步传递所需的事件（仅包含所需的轴移动）。 我使用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 }); }