Drag a known surface and move it back to its original position on the mouse?

Question

I want to drag the Famous surface and return it to its original position when I let it go. I took the “Drag and Drop” example and changed it, but when the mouseup is called back, it starts (I checked with console.log ) the modifier transformation is not. Here is 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); 

Quite precisely, this is related to the order / way that I am add , at the end of their mainContext and the order in which events are mainContext . What am I doing wrong / misunderstanding?

Answer 1

You need to set Position to the draggable modifier instead of trying to update the modifier (note I switched 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); 

Answer 2

instead of binding the mouseup event to the surface, a better way would be to use the final event when dragging

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

->

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

this way, the touch event will also take care of