State machine drag & drop

stateMachineDd.js

var Dragger = StatefulView.extend({
  states: {
    "dragging": function(e){ el.css({ opacity: 0.5 }) },
    "inactive": function(e){ el.css({ opacity: 1 }); }
  },
  transitions: {
    "mousedown .handle": ["inactive", "dragging"],
    "mouseup": ["dragging", "inactive"],
    "mousemove": ["dragging", "dragging", function(e){
      el.css({ left: e.pageX, top: e.pageY });
    }
  }
});