jQuery 可拖动限制在取消限制之前在 Y 轴上拖动 100 像素

Question

我正在编辑汉诺塔游戏，用户可以在其中将圆盘从一个桩拖到另一个桩。

plugin I found 正在使用 jQuery UI draggable/dropable 来完成此操作。我想编辑插件以实现用户必须首先向上拖动（Y 轴）一定数量的像素然后才能不受任何限制地拖动 left/right/up/down 的功能。

有没有办法要求用户先向上拖动 100 像素，然后才允许用户在容器内任意位置拖动？

下面是我将可拖动功能绑定到光盘的代码（以及将拖动的坐标记录到本地存储中），以备不时之需。

discObj.getDisc().draggable({
    revert: 'invalid',
    containment: this.container,
    cursor: 'move',
    disabled: true,
    helper: 'clone',
    scroll: false,
    drag: function(event, ui) {
        var pos = ui.position;
        var numPos = localStorage.getItem('numStepPositions');
        var coordinates = 'disc:' + discID + ';left:' + pos.left + ';top:' + pos.top +';';

        localStorage.setItem('position' + numPos, coordinates);

        numPos++;
        localStorage.setItem('numStepPositions', numPos);
    }
});

Answer 1

您可以在检测到负 Y 平移后编辑 axis 参数：

$(".box").draggable({
    revert: 'invalid',
    cursor: 'move',
    //disabled: true,
    helper: 'clone',
    axis: "y",
    scroll: false,
    start: function (event, ui) {
        initialPos = ui.position.top;
        $(this).addClass("Yaxis");
    },
    drag: function (event, ui) {
        var pos = ui.position;
        if (pos.top < initialPos - 100 && $(this).is(".Yaxis")) {
            $(this).removeClass("Yaxis");
            $(this).draggable('option', 'axis', false);
        }

    },
    stop: function( event, ui ) {
     $(this).draggable('option', 'axis', "y");
    }
});

请参阅the fiddle

首先将axis: "y"添加到.draggable()选项中。然后，您必须在放置开始时存储拖动元素的初始顶部位置，并添加一个标志，告诉它是轴约束的：

start: function (event, ui) {
    initialPos = ui.position.top;
    $(this).addClass("Yaxis");
},

现在，如果拖动的元素已经移动超过 100px，并且具有 Yaxis 类名：

，则只需检查 drag 事件

var pos = ui.position;
if (pos.top < initialPos - 100 && $(this).is(".Yaxis")) {
    $(this).removeClass("Yaxis");
    $(this).draggable('option', 'axis', false);
}

最后在拖动停止处重置 axis:"y"：

stop: function( event, ui ) {
     $(this).draggable('option', 'axis', "y");
}

jQuery 可拖动限制在取消限制之前在 Y 轴上拖动 100 像素

jQuery Draggable restrict drag on Y axis for 100 pixels before unrestricting

jquery

jquery-ui

draggable

jquery-ui-draggable