I'm using hammer.js for gesture functionality on my web application. I have used it to swipe a video element and it works perfect as expected. However, when I apply the following code to an image element it's not working.

App.Views.Photo = Backbone.View.extend({
template  : template('photoTemplate'),
className : 'photo',
parent    : null,

events: {
    'swipe' : 'swiped',
    // 'pan'    : 'dragged'
},

...

swiped: function(e) {

    this.remove();
    this.parent.newContent(this.model);
},

This exact same code is working for the video elements but not for the images. I also tried doing e.gesture.preventDefault(); inside the swiped function but that didn't work either. I'm testing the application on firefox at the moment.

Any help will be appreciated.

Thanks

[EDIT]: I'm initializing the hammer code as follows

render: function() {

    $(this.el).attr('id', this.model.attributes._id);
    this.$el.html( this.template( this.model.toJSON() ) );

    this.$el.hammer();

    return this;
},

I'm using hammer.js for gesture functionality on my web application. I have used it to swipe a video element and it works perfect as expected. However, when I apply the following code to an image element it's not working.

App.Views.Photo = Backbone.View.extend({
template  : template('photoTemplate'),
className : 'photo',
parent    : null,

events: {
    'swipe' : 'swiped',
    // 'pan'    : 'dragged'
},

...

swiped: function(e) {

    this.remove();
    this.parent.newContent(this.model);
},

This exact same code is working for the video elements but not for the images. I also tried doing e.gesture.preventDefault(); inside the swiped function but that didn't work either. I'm testing the application on firefox at the moment.

Any help will be appreciated.

Thanks

[EDIT]: I'm initializing the hammer code as follows

render: function() {

    $(this.el).attr('id', this.model.attributes._id);
    this.$el.html( this.template( this.model.toJSON() ) );

    this.$el.hammer();

    return this;
},

• javascript
• backbone.js
• hammer.js

• and where are you creating a hammer instance in that code..? – T J Commented Nov 8, 2014 at 18:41
• Sorry about that ... See edited answer above. And once again this exact same code is working for the video element but not the images – Haseeb Commented Nov 9, 2014 at 4:03
• Wow, no one knows the solution or why this might be happening? – Haseeb Commented Nov 15, 2014 at 17:56
• Viewed 65 times and not a soul knows how to solve this problem. – Haseeb Commented Nov 24, 2014 at 16:55

2 Answers 2

You can use:

<img draggable="false"...

Or in CSS like this (May not be supported by all browsers, esp IE)

pointer-events: none;

Ok, so after banging my head on this problem for weeks I finally got the answer.

in the initialize function I placed the following code

$('img').on('dragstart', function(event) { event.preventDefault(); });

So it looks like this

initialize: function(opts) {
    this.render();
    this.parent = opts.parent;

    $('img').on('dragstart', function(event) { event.preventDefault(); });
},

What this does is that it prevents the image from being dragged like default and that did the trick.

And now on swipe the image gets removed like I wanted.

[EDIT] If you have multiple images on the page add this to the event like

this.$('img').on('dragstart', function(event) { event.preventDefault(); });

This will apply to all of the picture that are rendered with that view.