javascript - What triggers the isFinal property of a pan event in Hammerjs? -
i using hammerjs handle simple drag , drop scenario. want element bounce when within region of bounding box or zoom off screen if outside of that. using isfinal property determine when call callback function, handles bouncing back. issue is, not clear on how 'pan' event works, unless element still moving when mouse released, gets stuck , isfinal property stays false.
so need figure out how trigger isfinal property @ anytime when element released.
the code below context.
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 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, when mouse released. think, it's not way handle it. found this:
"the isfirst , isfinal kind of internal properties, used hammer, exposed anyway (doesn't hurt)" 1
instead of unsing e.isfinal, this:
obj.hammer.on('panend',function(e){/*...*/}); but think, have way. so, understood, want manually set isfinal property true, "pandleft/right" handler fire callback.
try this:
after initializing hammer object, add custom data:
window[oargs.id + 'hammer'] = { hammer: new window.hammer(oargs.el), x: x, //y: y }; window[oargs.id + 'hammer'].hammer.customdata = {isfinal: false}; change
if (e.isfinal && oargs.callback) { to
if (obj.hammer.customdata.isfinal && oargs.callback) { when think, it's time set isfinal true (based on own rules , beliefs):
window[oargs.id + 'hammer'].hammer.customdata.isfinal = true; maybe, want set property false again in callback.