在不受限制之前，jQuery Draggable将Y轴上的拖动限制为100像素

Question

我正在编辑一个河内塔游戏，用户可以将光盘从一个挂钩拖到另一个挂钩。

plugin I found使用jQuery UI draggable / dropable来完成此任务。我想编辑插件来实现功能，用户必须首先向上拖动（Y轴）一定数量的像素才能在没有任何约束的情况下向左/向右/向上/向下拖动。

在允许用户在容器内的任何位置拖动之前，有没有办法要求用户首先向上拖动100个像素？

下面是将可拖动功能绑定到光盘的代码（以及将thr拖动的坐标记录到本地存储中），以防它有用。

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

现在，只需检查drag事件，如果拖动的元素已超过100px，并且具有Yaxis类名：

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