Custom mouse events in backbonejs

Question

What would be a good way of supporting custom mouse events? For example, I currently have:

events: {
  "mousedown .canvas-container" : "getPixel",
},

But instead of mousedown , I would like to create a custom event called mousedrag which would be a combination of mousedown and mousemove . Is there any recommended way of adding such a custom event?

Answer 1

Since Backbone element events are simply jQuery ( or whatever library you use ) events, you might want to use jQuery UI : http://jqueryui.com/demos/draggable/ . By loading aside with jQuery and Backbone you will have "drag" event, which you could bind in your code, just like any other event :

   events: { "drag .canvas-container" : "getPixel" }

Of course there is a way to create a custom events in jQuery, but I assume it is a lot of work for the draggable objects and since it is already written with cross-browser support it is better to use jQuery UI.

PS jQuery UI is fully customizable, so you can build your own version on the site, which includes the specific methods you want : http://jqueryui.com/download