CODEWITHSUNDEEP
jqueryjquery-uidraggablejquery-ui-draggable
cfnerd
cfnerd

Reputation: 3799

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

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

Tower of Hanoi

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

Upvotes: 0

Views: 1793

Answers (1)

EdenSource
EdenSource

Reputation: 3387

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

Upvotes: 2

Related Questions