Przeciągnij słynną powierzchnię i przenieś ją z powrotem do punktu początkowego po kliknięciu myszą?

Question

Chcę przeciągnąć słynną powierzchnię i przywrócić jej pierwotną pozycję, gdy ją puściłem. Wziąłem przykład "przeciągnij" i zmodyfikowałem go, ale gdy wywoływane jest wywołanie zwrotne mouseup (sprawdziłem z console.log), transformacja modyfikatora nie jest. Oto odpowiedni kod:

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

pewien, że ma do czynienia z zamówieniem/sposób, że jestem add -ing im mainContext na końcu, a porządek, w jakim zdarzenia powodują. Co robię źle/nieporozumienie?

Answer 1

Trzeba setPosition na Draggable modyfikatora, zamiast próbować aktualizować modyfikatora (uwaga przeszedłem do 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

zamiast wiązania mouseUp zdarzenia na powierzchni, lepszy sposób można za pomocą końca impreza na Draggable

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

->

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

w ten sposób, zdarzenie dotykowe zostanie również obsłużone.