Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 315
Theodor Vararu Avatar asked Apr 17 '14 09:04

Theodor Vararu


2 Answers

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);
like image 101
johntraver Avatar answered Nov 09 '22 00:11

johntraver


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

like image 28
liding Avatar answered Nov 09 '22 00:11

liding