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

Question

I am editing a Tower of Hanoi game, where a user can drag discs from one peg to another peg.

The plugin I found is using jQuery UI draggable/dropable to accomplish this. I want to edit the plugin to implement functionality where the user has to first drag up (Y axis) a certain number of pixels before they are then able to drag left/right/up/down without any constraints.

Is there any way to require the user to first drag up 100 pixels before allowing the user to drag anywhere within the container?

Below is the code where I bind the draggable functionality to the disc (as well as record the coordinates of thr drag into local storage), in case it helps.

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

EdenSource · Accepted Answer · 2015-09-22T13:45:44.393

You can edit axis parameter after having detected a negative Y translation :

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

Please see the fiddle

First add axis: "y" to the .draggable() options. Then, you have to store the initial top position of the dragged element at drop start, and add a flag that tells it is axis constrained :

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

Now, just check in drag event if the dragged element have been mover over 100px, and have Yaxis classname :

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

And finally reset axis:"y" at drag stop :

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

You, sir, are a gentleman and a scholar! Thanks for the quick answer. I just implemented your edit it into the actual game and it works as expected. Thanks! — cfnerd, Sep 22 '15 at 13:45
Your revisions helped. At first, I tried it and realized I forgot a small bit of the edit. Setting each edit apart really helped. — cfnerd, Sep 22 '15 at 13:48

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

1 Answers1