Drag event doesn't work when the web page is reloaded

Question

I have used hammer.js plugin in my code for drag event, it works correctly when the page is loaded first but doesn't work if the same page is reloaded. Why ?

(function() {

$.fn.touchpanzoom = function() {

var $img = $(this)
var zoomer = $img.panzoom() 
var hammer = new Hammer($img.get(0), {
  prevent_default: true
})

applyDragFunction(zoomer, hammer)

}

function applyDragFunction(zoomer, hammer) {

var dragTimer = null
var lastDrag = {
  x: 0,
  y: 0
}

var currentDrag = {
  x: 0,
  y: 0
}

function updateDrag() {
    var x = lastDrag.x - currentDrag.x
    var y = lastDrag.y - currentDrag.y 
    lastDrag.x = currentDrag.x
    lastDrag.y = currentDrag.y
    zoomer.pan(x, y, 0)       
}

hammer.ondragstart = function(e) {
  lastDrag.x = 0
  lastDrag.y = 0      
  dragTimer = setInterval(updateDrag, 20)
  return false
}
hammer.ondrag = function(e) {
    currentDrag.x = e.distanceX      
    currentDrag.y = e.distanceY
  return false
}

hammer.ondragend = function() {
  clearInterval(dragTimer)
  updateDrag()
  return false
}

} } () )

Please visit this site to download the Plugin

Answer 1

Change }()) to })() ;) This does look suspicious.

UPDATED.

(function() {

$.fn.touchpanzoom = function() {

var $img = $(this)
var zoomer = $img.panzoom() 
var hammer = new Hammer($img.get(0), {
  prevent_default: true
}) <--- add () here

Is this a legit piece of code you have? Why not to call it , every time? Right now , it looks like You're just adding a piece of this code(which should run once on load , but not on reload). I think that's the problem.