拖动着名表面并让它在mouseup上转换回原点？ [英] Drag a Famous surface and have it transition back to origin on mouseup?

问题描述

我想拖动一个着名的表面，当我放开它时让它回到原来的位置。我已经采用了拖动示例并对其进行了修改，但是当 mouseup 回调被触发时（我使用 console.log ），修饰符变换不是。以下是相关代码：

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

非常确定它与我的订单/方式有关将添加到最后的 mainContext ，以及事件触发的顺序。我做错了什么/误会？

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?

推荐答案

你需要在draggable修饰符上设置setPosition，而不是尝试更新修饰符（注意我切换到StateModifier）

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

这篇关于拖动着名表面并让它在mouseup上转换回原点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！