javascript - 什么触发了 Hammerjs 中平移事件的 isFinal 属性？

我正在使用 HammerJS 来处理一个简单的拖放场景。我希望元素在我的边界框的某个区域内时反弹回来，或者如果它在该区域之外则缩小屏幕。我正在使用 isFinal 属性来确定何时调用处理反弹的回调函数。问题是，可能是我不清楚“平移”事件的工作原理，除非释放鼠标时元素仍在移动，否则它会卡住并且 isFinal 属性保持为 false。

所以我需要弄清楚的是如何在元素被释放时随时触发 isFinal 属性。

下面是一些上下文的代码。

    var registerNodeDraggable = function(oArgs) {
        if (!oArgs.id || !oArgs.el) { return; }

        var x = parseInt(oArgs.el.style.left,10) || 0;
        //var y = parseInt(oArgs.el.style.top,10) || 0;

        window[oArgs.id + 'Hammer'] = {
            hammer: new window.Hammer(oArgs.el),
            x: x,
            //y: y
    };

        var obj = window[oArgs.id + 'Hammer'];

        if (obj.hammer) {
            obj.hammer.on('panleft panright', function(e) {
                console.log(e);
                console.log(e.deltaTime);
                console.log(e.type);
                oArgs.el.style.left = obj.x + e.deltaX + 'px';
                // oArgs.el.style.top = obj.y + e.deltaY + 'px';
                if (e.isFinal && oArgs.callback) {
                    console.log('Is Final');
                    obj.x += e.deltaX;
                    //obj.y += e.deltaY;

                    oArgs.callback.call(this, e, obj);
                }
            });
        }
    };

    registerNodeDraggable({
        el: this.$ticker[0],
        id: 'swipe',
        callback: function(e, obj) {

            console.log('I am being called');

            //self.$ticker.velocity({opacity: 0});
            var $container = $('.tickerContainer');
            var offset = $container.offset();
            var tickerOffset = self.$ticker.position();
            var offsetRight = $container.width()  - self.$ticker.width() -  tickerOffset.left;
            var offsetBottom = $container.height() - self.$ticker.height() - tickerOffset.top;

            console.log(offsetRight + ' :Right');
            console.log(tickerOffset.left + ' :Left');


            if( offsetRight < -30 ){
                console.log('Bull');
                self.$ticker.velocity({translateX: 1000, opacity: 0},{duration: 250, complete: function(){
                    self.$ticker.velocity({ left:0, top: 0,  translateX: 0 }, {complete: function() {
                        obj.x = 0;
                        //obj.y = 0;
                         self.pick(self._nextTicker.ticker, 'Bull'); console.log('Bull');
                    } });
                } });

            } else if(tickerOffset.left < -30){
                console.log('Bear');
                self.$ticker.velocity({translateX: -1000, opacity: 0},{duration: 250, complete: function(){
                    self.$ticker.velocity({ left:0, top: 0,  translateX: 0 }, {complete: function() {
                        obj.x = 0;
                        //obj.y = 0;
                        self.pick(self._nextTicker.ticker, 'Bear'); console.log('Bear');
                    } });
                } });
            } else {
                self.$ticker.velocity({
                    left: 0,
                    top: 0 },
                    {duration: 250,
                    complete: function(){
                    obj.x = 0;
                    //obj.y = 0;
                    }
                });
            }
        }
    });

最佳答案

afaik isFinal 是 true ，当鼠标被释放时。但我认为，这不是处理它的方式。发现这个:

“isFirst 和 isFinal 是一种内部属性，由 Hammer 使用，但无论如何都会暴露(不会受到伤害)” 1

不要取消 e.isFinal ，而是这样做:

obj.hammer.on('panend',function(e){/*...*/});

但我认为，你必须以另一种方式去做。
因此，据我了解，您希望手动将 isFinal 属性设置为 true ，以便您的“pandleft/right”处理程序触发回调。

试试这个:

初始化锤子对象后，添加一些自定义数据:

window[oArgs.id + 'Hammer'] = {
        hammer: new window.Hammer(oArgs.el),
        x: x,
        //y: y
};
window[oArgs.id + 'Hammer'].hammer.customData = {isFinal: false};

改变

if (e.isFinal && oArgs.callback) {

至

if (obj.hammer.customData.isFinal && oArgs.callback) {

当你思考的时候，是时候设置 isFinal true (基于你自己的规则和信念):

window[oArgs.id + 'Hammer'].hammer.customData.isFinal = true;

也许，您想在回调中再次将该属性设置为 false。

关于javascript - 什么触发了 Hammerjs 中平移事件的 isFinal 属性？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29549504/