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

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

1 个答案: