CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggablejquery-ui-draggable
Django Johnson
Django Johnson

Reputation: 1449

jQuery UI Draggable revert to original position if moved less than a certain distance

I am using jQuery UI to make an object draggable.

I know how to make the object revert to its original position in all cases using: $("#draggable").draggable({ revert: true });

However, how can I make an object revert back only when it has moved to the left or to the right 80% of its width?

Upvotes: 0

Views: 1634

Answers (1)

Dan-Nolan
Dan-Nolan

Reputation: 6657

You can revert conditionally based on your start position determined in the start event.

$('.dataCard').draggable({ axis: 'x', 
    revert: function() {
        //determine the start/end positions
        var end = $(this).position().left;
        var start = $(this).data('start');
        //subtract end and start to get the (absolute) distance
        var distance = Math.abs(end - start);
        var width = $(this).width();
        //if the distance is more than 80% of the width don't revert
        if(distance > (width * .8))
        {
             return false;
        }
        //else revert
        return true;
    },
    start: function(){
        //get the start position
        var start = $(this).position().left;
        //store the start position on this element
        $(this).data('start', start);
    }
});

Demonstration

Upvotes: 1

Related Questions