Javascript jquery.pep：如何在拖动后捕捉到容器的边缘

我正在使用创建一个类似facebook聊天泡泡的效果，用户可以在其中抛出泡泡，当它被抛出到某个特定区域时，它会被移除

这一切都很好，但我想确保气泡总是落在容器的一个边缘上（离它停止的位置最近的一个），最好是继续移动，而不是立即捕捉到其中一个边缘，知道怎么做吗

JsBin：

---

因此，最终我采用了这个解决方案，我等待它停止，然后将其移动到一个边缘：

JsBin：

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

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