Constrain axis movement to x or y depending on direction

[ghost]

Kind of having a success though.. lol.
Maybe add setInterval to let user slip up the direction some.... ; )

dragger.on('dragMove', function (instance) {

    if (checkAxis){
        dragX = Math.abs(instance.dragPoint.x);
        dragY = Math.abs(instance.dragPoint.y);

        if (dragX > dragY) {
            console.log('X ' + dragX)
            dragger.options.axis = 'x';
        } else {
            console.log('Y ' + dragY)
            dragger.options.axis = 'y';
        }
        checkAxis = false;
    }

});

dragger.on('dragEnd', function (instance) {

    checkAxis = true;
    dragger.options.axis = 'x, y';

});

[temuri416]

Thanks for the snippet!

I added if (checkAxis && event.ctrlKey) and constraint is on when control key is pressed.

Cheers!

[temuri416]

Hmmm.. The only problem now is that a user may move pointer by a pixel in the wrong direction and you get an opposite constraint in effect.

For example, meaning to constrain along vertical axis, user moves mouse horizontally by a pixel, and then vertically by a greater distance. So, the movement will be constrained horizontally, which wasn't what user intended....

Any idea how that can be addressed?

[ghost]

hmm.. whaaaaat !?
When you start your drag, the axis will be constrained to x or y, depending on direction.
You have to release the button to start a new check..
However the problem is that it´s very precise, thats why i suggest use a setInterval or something to measure user direction for a longer period of dragging, but then it will kind of jump to place after setInterval is cleared.. so we need "hold" the dragMove function for some pixels of user direction measurement .. you have to set axis true on both x and y on init as well.

dragger = new Draggabilly(elem, {
      axis: 'x, y'
});

[temuri416]

I don't think this is supported:

axis: 'x, y'

That's exactly the same as setting it to null.

As for the interval check - would be nice to see how you implement it.

Thanks.

[ghost]

yep you have to (axis:'x, y') on "dragEnd" of course to be able to start a new measurement of user direction drag.

[ghost]

I will have a go on the delay drag thing later this night or tomorrow,
if not mr Desandro himself have the time to hint us on a more easy approach to this...
I mean I am only a designer trying to do math.. lol...

[temuri416]

👍 Yeah, Mr. @desandro - would be nice to have it as a core functionality :)

[ghost]

+ 1

[desandro]

@A-Monkey Thanks for taking a swing at this. I have put together another version http://codepen.io/desandro/pen/ogvVLw . Let's keep the discussion at #53