根据可拖动方向设置轴jQuery可拖动答案

【问题标题】：Set axis depending draggable direction jQuery draggable根据可拖动方向设置轴jQuery可拖动
【发布时间】：2012-03-02 02:03:12
【问题描述】：

如何根据可拖动方向（初始化后）设置轴？

如果是左右拖动，则为 x，如果上下拖动，则为 y。

$("#belt").draggable({
    handle: "li",
    axis: "y",
    start: function() {

        //I want to be dragged in the axis i belong which should be x....

    },
});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

您最初使用距离来约束运动，以获取用户移动方向的初始读数，然后设置轴限制。

var x, y;

$("#belt").draggable({
    start: function(event) {
        x = event.originalEvent.pageX;
        y = event.originalEvent.pageY;
    }, 
    drag: function(event) {
        if (x && y) {
            axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
            $("#belt").draggable('option', 'axis', axis);
            x = y = null;
        }        
    },
    stop: function() {
        x = y = null;
        $("#belt").draggable('option', 'axis', false);
    },
    distance: 20
});

这是一个小提琴：http://jsfiddle.net/jhchen/B7J2E/

【讨论】：

它如何确定阻力的方向？相同的元素轴需要根据方向切换。
抱歉误解了这个问题。更新了解决方案。
非常感谢，这正是我所需要的。

【解决方案2】：

感谢jhchen的回答！我将您的小提琴分叉以包含一些代码，以便仅当用户在拖动时按住 shift 键时才会发生轴锁定。

http://jsfiddle.net/B7J2E/40/

var x, y;

$("#test").draggable({
    start: function(event) {
        console.log(event);
        x = event.originalEvent.pageX;
        y = event.originalEvent.pageY;
        console.log(x, y);
    }, 
    drag: function(event) {
        if (event.shiftKey) { 
            if (x && y) {
                axis = Math.abs(event.originalEvent.pageX - x) > Math.abs(event.originalEvent.pageY - y) ? 'x' : 'y';
                $("#test").draggable('option', 'axis', axis);
                x = y = null;
            }        
        }
    },
    stop: function() {
        x = y = null;
        $("#test").draggable('option', 'axis', false);
    },
    distance: 20
});

【讨论】：