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 mouseup callback is triggering (I checked with console.log), the modifier transform is not. Here's the relevant code:

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 Modifier();

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

surface.on('mouseup', function() {
  mod.setTransform(Transform.translate(0, 0, 0), trans);
});

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

Pretty sure it has to do with the order/way that I'm add-ing them to mainContext at the end, and the order in which events are triggering. What am I doing wrong/misunderstanding?

Valkyrie

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);

Bolingbroke

@TheodorVăraru You're welcome! This was a fun exercise for me as well! – Bolingbroke

@johntraver. I am trying to extend your code into a drag and drop. That is, the draggable surface won't snap back if it is dragged to a target view. Do you think you could figure that out? https://mcmap.net/q/1475736/-droppable-in-famous-js/1486911 – Vitriform

@Bolingbroke How might I extend this code to take into account velocity at 'mouseup' and have the surface end up at a new position based on the velocity rather than have it return to the original position? – Charmine

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

Arginine