拖动着名表面并让它在mouseup上转换回原点？

Question

我想拖动一个着名的表面,当我放开它时让它回到原来的位置.我已经采用了"拖动"示例并修改了它,但是当mouseup回调触发时(我检查过console.log),修改器转换不是.这是相关的代码:

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

相当肯定它与顺序/方式,我做add他们-ing到mainContext结尾,并在事件被触发的顺序.我做错了什么/误会？

Answer 1

你需要在draggable修饰符上设置setPosition,而不是尝试更新修饰符(注意我切换到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

而不是在表面上绑定mouseup事件,更好的方法可能是在draggable上使用end事件

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

- >

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

以这种方式,触摸事件也将被处理