拖动一个Famous曲面，并使其在mouseup上转换回原点

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

本文关键字：mouseup 原点 转换 一个 曲面 Famous 拖动      更新时间：2023-09-26

我想拖动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的顺序/方式以及事件触发的顺序有关。我做错了什么/误解了什么？

您需要在可拖动修饰符上设置Position，而不是尝试更新修饰符（注意，我已将您切换到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事件，更好的方法可能是在可拖动上使用结束事件

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

->

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

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

相关文章：