设置轴取决于可拖动方向jQuery可拖动 [英] Set axis depending draggable direction jQuery draggable

问题描述

如何根据可拖动方向(在初始化之后)设置轴?

How can the axis be set depending it's draggable direction (after init)?

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

If it's dragged left-right it will be x, y if dragged up-down.

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

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

    },
});

推荐答案

您首先使用距离限制运动，以初步了解用户正在移动的方向，然后设置轴限制.

You use distance to constrain the motion initially to get the initial read of which direction the user is moving and then set the axis limitation.

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/

这篇关于设置轴取决于可拖动方向jQuery可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！