Javascript 拖动一个著名的曲面，并在鼠标悬停时将其转换回原点？

我想拖动一个著名的曲面，当我放开它时，让它回到原来的位置。我已经使用了“拖动”示例并对其进行了修改，但是当

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

---

很明显，这与我在

末尾将它们添加到
mainContext
的顺序/方式以及事件触发的顺序有关。我做错了什么/误解了什么？
您需要在可拖动修改器上设置位置，而不是尝试更新修改器（注意，我已将您切换到StateModifier）

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

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

->

这样，触摸事件也将得到处理
工作正常。再次感谢你，约翰@TheodorVăraru不客气！这对我来说也是一个有趣的练习@约翰特拉弗。我正在尝试将您的代码扩展为拖放。也就是说，如果将可拖动曲面拖动到目标视图，则该曲面不会回缩。你觉得你能弄明白吗@johntraver如何扩展此代码以考虑“mouseup”处的速度，并使曲面基于速度结束在新位置，而不是返回到原始位置？
surface.on('mouseup', function() {
  draggable.setPosition([0,0,0], trans);
});

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