jquery.pep: how to snap to edges of container after drag

Question

I'm using jquery.pep to create an effect like facebook's chat bubble, where the user can throw the bubble and when it is thrown to a certain area it is removed.

It's all working fine but i want to make sure the bubble always ends up on one of the container's edges (the one closest to where it stops), preferably by continuing the movement and not just snapping immediately to one of the edges, any idea how to do it?

JsBin: https://jsbin.com/mozutujequ/2/edit?html,js,output

//if the ball is dropped here it will be removed
var $basket = $('.basket');
var pos = $basket.position();
//this is used to prevent the click event from firing when the ball is dragged
var dragging = false;

//you can find instruction on the properties here: http://pep.briangonzalez.org/
$('#draggable').pep({
    useCSSTranslation: true,
    constrainTo: 'parent',
    droppable: '.basket',
    cssEaseDuration: 1000,
    droppableActiveClass: 'active',

    //this is fired when the ball stops moving
    rest: function(ev, obj) {

    },
    //this is fired as long as the user drags
    drag: function() {

    }
});

//remove the ball if it is inside the basket
function _removeBubble(self) {
    if (self.activeDropRegions.length > 0) {

        $('#draggable').remove();
        $('.basket').remove();
    }
}

Answer 1

So eventually i went with this solution, where i wait for it to stop and then i move it to one of the edges:

JsBin: https://jsbin.com/yidosahidu/1/edit?js,console,output

//if the ball is dropped here it will be removed
var $basket = $('.basket');
var pos = $basket.position();
//this is used to prevent the click event from firing when the ball is dragged
var dragging = false;

    //you can find instruction on the properties here: http://pep.briangonzalez.org/
    $('#draggable').pep({
        useCSSTranslation: false,
        constrainTo: 'parent',
        droppable: '.basket',
        cssEaseDuration: 1000,
        droppableActiveClass: 'active',

        //this is fired when the ball stops moving
        rest: function(ev, obj) {
          var pos = this.$el.offset();
          var left = 0;
          if (pos.left > 250){
            left = 500 - this.$el.outerWidth();
          }
          this.$el.css({top: this.$el.top,left: left});
        },
        //this is fired as long as the user drags
        drag: function() {

        }
    });

    //remove the ball if it is inside the basket
    function _removeBubble(self) {
        if (self.activeDropRegions.length > 0) {

            $('#draggable').remove();
            $('.basket').remove();
        }
    }