Drag a Famous surface and have it transition back to origin on mouseup?

Question

I want to drag a Famous surface, and have it return to its original position when I let go of it. I\'ve taken the \"Drag\" example and modified it, but while the mouse

Answer 1

You need to setPosition on the draggable modifier, instead of trying to update the Modifier (Note I switched you to StateModifier)

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var StateModifier       = require("famous/modifiers/StateModifier");
var Draggable           = require("famous/modifiers/Draggable");
var Transform           = require("famous/core/Transform");
var Transitionable      = require("famous/transitions/Transitionable");

var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [200, 200],
  content: 'drag',
  properties: {
    backgroundColor: 'rgba(200, 200, 200, 0.5)',
    lineHeight: '200px',
    textAlign: 'center',
    cursor: 'pointer'
  }
});

var draggable = new Draggable({
  xRange: [-220, 220],
  yRange: [-220, 220]
});

surface.pipe(draggable);

var mod = new StateModifier();

var trans = {
  method: 'snap',
  period: 300,
  dampingRatio: 0.3,
  velocity: 0
};

surface.on('mouseup', function() {
  draggable.setPosition([0,0,0], trans);
});

mainContext.add(mod).add(draggable).add(surface);

Answer 2

instead of binding mouseup event on surface, better way might be using the end event on draggable

surface.on('mouseup', function() {
  draggable.setPosition([0,0,0], trans);
});

->

draggable.on('end', function(e) {
    draggable.setPosition([0,0,0], trans);
});

in this way, the touch event will be taken care of as well