Dragging related issue famo.us - famo.us

Question

I am very new to Famo.us I am trying to code the following. There are 4 famous image surface surface,surface2,surface3,surface4. Surface1 has image content other 3 are blank. I want to setContent of the other 3 surface by dragging image at them or by dragging surface1.
There are three problems with it:
1) After first drag I am setting the content and trying to move the imagesurface(surface) back to original location, but it is not moving.
2) When I am setting the imagesurface(surface) at any other location than (0,0,0) then the behavior is changed.
3) When I am changing the imagesurface with inputsurface there is huge time lag.
Here is my code:
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");
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 ImageSurface = require('famous/surfaces/ImageSurface');
var Timer = require('famous/utilities/Timer');
var EventHandler = require('famous/core/EventHandler');
var InputSurface = require("famous/surfaces/InputSurface");
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
var mainContext = Engine.createContext();
var eventHandler = new EventHandler();
var surface = new ImageSurface({
size: [200, 200],
content: 'img/1.jpg',
properties: {
cursor: 'pointer'
}
});
var background_surface = new ImageSurface({
size: [200, 200],
content: 'img/1.jpg',
properties: {
cursor: 'pointer'
}
});
var surface2 = new ImageSurface({
size: [200, 200],
// type: 'image'
content: ''
});
var surface3 = new ImageSurface({
size: [200, 200],
content: ''
});
var surface4 = new ImageSurface({
size: [410, 200],
content: ''
});
var mod2 = new Modifier({
transform: Transform.translate(500, 0, 0)
});
mainContext.add(mod2).add(surface2);
var mod3 = new Modifier({
transform: Transform.translate(710, 0, 0)
});
mainContext.add(mod3).add(surface3);
var mod4 = new Modifier({
transform: Transform.translate(500, 210, 0)
});
mainContext.add(mod4).add(surface4);
var draggable = new Draggable({
xRange: [-1000, 1000],
yRange: [-1000, 1000]
});
surface.pipe(draggable);
var mod = new Modifier({
});
var back_mod = new Modifier({
origin: [0,0]
});
var trans = {
method: 'snap',
period: 100,
dampingRatio: 0.3,
velocity: 0
};
var check=0;
draggable.on('start', function()
{ draggable.setPosition([0,0,0], trans);
check=0;
surface._matrix[12] = 0;
console.log(surface._matrix[12]);
});
surface.on('mouseup', function() {
draggable.setPosition([0,0,0], trans);
});
draggable.on('end', function(data){
surface2.on('mouseover', function(){
if(check==0)
{ draggable.setPosition([surface2._matrix[12],surface2._matrix[13],surface2._matrix[14]], trans);
check=1;
mainContext.add(back_mod).add(background_surface);
}
});
surface3.on('mouseover', function(){
if(check==0)
{console.log("Surface3");
draggable.setPosition([surface3._matrix[12],surface3._matrix[13],surface3._matrix[14]], trans);
mainContext.add(back_mod).add(background_surface);
check=1;}
});
surface4.on('mouseover', function(){
if(check==0){
console.log("Surface4");
draggable.setPosition([surface4._matrix[12]-256,surface4._matrix[13],surface4._matrix[14]], undefined);
var scale_factor= 410/200;
mod.setTransform(
Transform.scale(scale_factor,1, 0),
{ duration :0,curve: 'linear' }
);
check=1;
mainContext.add(back_mod).add(background_surface);
}
});
});
mainContext.add(mod).add(draggable).add(surface);
});

Answer 1

I'm a little unsure of what you're going for but... here's a different version where the draggable always returns to 0,0 and can be used again to set content of another image surface. Can you help with more detail on what you're trying to achieve?
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Modifier = require("famous/core/Modifier");
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 ImageSurface = require('famous/surfaces/ImageSurface');
var Timer = require('famous/utilities/Timer');
var EventHandler = require('famous/core/EventHandler');
var InputSurface = require("famous/surfaces/InputSurface");
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
var mainContext = Engine.createContext();
var surface = new ImageSurface({
size: [200, 200],
content: 'images/1.jpg',
properties: {
cursor: 'pointer'
}
});
var background_surface = new ImageSurface({
size: [200, 200],
content: 'images/1.jpg',
properties: {
cursor: 'pointer'
}
});
var surface2 = new ImageSurface({
size: [200, 200],
content: ''
});
var surface3 = new ImageSurface({
size: [200, 200],
content: ''
});
var surface4 = new ImageSurface({
size: [410, 200],
content: ''
});
var mod2 = new Modifier({
transform: Transform.translate(500, 0, 0)
});
mainContext.add(mod2).add(surface2);
var mod3 = new Modifier({
transform: Transform.translate(710, 0, 0)
});
mainContext.add(mod3).add(surface3);
var mod4 = new Modifier({
transform: Transform.translate(500, 210, 0)
});
mainContext.add(mod4).add(surface4);
var draggable = new Draggable({
xRange: [-1000, 1000],
yRange: [-1000, 1000]
});
draggable.imageSurface = surface;
surface.pipe(draggable);
var mod = new Modifier({
});
var back_mod = new Modifier({
origin: [0,0]
});
var trans = {
method: 'snap',
period: 100,
dampingRatio: 0.3,
velocity: 0
};
var check=0;
draggable.on('start', function()
{
check=0;
surface._matrix[12] = 0;
console.log(surface._matrix[12]);
});
draggable.on('end', function(data){
var theDraggable = this;
surface2.on('mouseover', function(){
if(check==0)
{
console.log("Surface2");
check=1;
this.setContent(theDraggable.imageSurface._imageUrl);
}
});
surface3.on('mouseover', function(){
if(check==0)
{console.log("Surface3");
this.setContent(theDraggable.imageSurface._imageUrl);
check=1;}
});
surface4.on('mouseover', function(){
if(check==0){
console.log("Surface4");
this.setContent(theDraggable.imageSurface._imageUrl);
check=1;
}
});
this.setPosition([0,0,0], trans);
});
mainContext.add(mod).add(draggable).add(surface);
});