jquery.pep：拖动后如何吸附到容器的边缘

Question

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

一切正常，但我想确保气泡始终停在容器的边缘之一（最靠近停止位置的边缘），最好继续移动而不是立即捕捉到其中一个边缘边缘，知道怎么做吗？

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

所以最终我采用了这个解决方案，在那里我等待它停止，然后将它移动到边缘之一：

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