How to listen to mousedown, mousemove and mouseup in a Backbonejs view method

Question

I'd like to be able to drag a div element inside a Backbone view. To do that, I would need to listen to these three events mouseup, mousedown, mousemove inside a Backbone View method.

    events: {
        "mousedown .status .progress .seek-bar .seek-bar-grip": "slide",
        "mouseup .status .progress .seek-bar .seek-bar-grip": "slide",
        "mousemove .status .progress .seek-bar .seek-bar-grip": "slide",
    },

    slide: function(event) {

        // Code about the drag here

    },

This won't work because each time an other event is fired, it will call the method again. My question is not how to drag a div element in javascript but how could I listen to these 3 events in the slide method.

Answer 1

You can distinguish between the events using the event.type in you slide function.

var FLAG = 1;
var currentTarget;
slide: function(event) {        
        // Code about the drag here
        if(event.type = "mousedown"){
            FLAG = 2; // now handle mouse move
            currentTarget = event.currentTarget;
        }else if(event.type = "mousemove"){
            if(FLAG == 2){
                // use the currentTarget to doSomething()
            }
        }else if(event.type = "mouseup"){
            FLAG = 1;
                // drop the target
        }
    },