7

我想拖动一个 Famous 表面，并在我放开它时让它回到原来的位置。我采用了“拖动”示例并对其进行了修改，但是在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将它们的顺序/方式mainContext以及事件触发的顺序有关。我在做什么错/误解？

4

2 回答 2

12

您需要在可拖动修饰符上设置位置，而不是尝试更新修饰符（注意我将您切换到 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);
于 2014-04-17T16:26:15.543 回答
10

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

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

->

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

这样，触摸事件也将得到处理

于 2014-05-03T08:08:42.973 回答