I am using Hammer js and jQuery ui draggable. When dragging an element in IE 7 - 8 the draggable element freezes in the next moment after draggable is executed. Even though I am using the plugins for different purposes they are causing an issue. Perhaps it’s something about the way the Hammer js event is bound in IE 7 - 8.
If I comment out the Hammer js event listener it’ll work absolutely fine.
Hammer js:
shortlistedProducts.hammer()
.on('swipe', function (e) {
var gestureDirection = e.gesture.direction,
productLength = shortList.find('.product').length,
nextSlide = (currentThumb + productsInLine) >= productLength ? productLength : currentThumb + productsInLine,
prevSlide = (currentThumb - productsInLine) < 0 ? null : currentThumb - productsInLine;
if (gestureDirection === 'left') {
thisObj.slideAnimationHandler("right", nextSlide === productLength, nextSlide);
} else if (gestureDirection === 'right') {
thisObj.slideAnimationHandler("left", prevSlide === null, prevSlide);
}
});
jQuery:
product.draggable({
appendTo: 'body',
helper: 'clone',
zIndex: 10010,
scroll: false
});
productContainer.droppable({
tolerance: 'touch',
activeClass: "ui-state-default",
activate: function (event, ui) {
if (!shortList.hasClass('visible')) {
shortList.animate({ 'bottom': 0 }).removeClass('preview').addClass('visible');
}
},
deactivate: function (event, ui) {
if (!shortlistedProducts.find('.product').length) {
shortList.animate({ 'bottom': '-' + shortList.outerHeight() }).removeClass('visible');
}
},
drop: function (event, ui) {
var target = jQuery(this).find('.products'),
targetLength = target.children('.product').length;
thisObj.shortListHandler(ui.draggable, 'add');
thisObj.productCountHandler();
}
});