I added two draggable ContainerSurfaces (dragbox1 & dragbox2) onto another transparent ContainerSurface (panLayer), which is also draggable. This enables panning while also enabling single dragging of the two boxes.
This worked in Famo.us 0.2, but ever since I started using version 0.3 dragging a box also activates panning. How do I stop the drag-event from propagating?
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');
var Draggable = require('famous/modifiers/Draggable');
var mainContext = Engine.createContext();
var dragbox1 = new ContainerSurface({
size: [200,200],
properties: {
backgroundColor: '#FF0000'
}
});
var dragbox2 = new ContainerSurface({
size: [200,200],
properties: {
backgroundColor: '#0000FF'
}
});
var dragMod1 = new Draggable({});
var dragMod2 = new Draggable({});
var panMod = new Draggable({});
var contentLayer = new ContainerSurface({
size: [undefined, undefined],
properties: {
backgroundColor: '#00FFFF'
}
});
var panLayer = new ContainerSurface({
size: [undefined, undefined],
properties: {
backgroundColor: 'rgba(0, 0, 0, 0)'
}
});
panMod.subscribe(contentLayer);
dragMod1.subscribe(dragbox1);
dragMod2.subscribe(dragbox2);
contentLayer.add(panMod).add(panLayer);
panLayer.add(dragMod1).add(dragbox1);
panLayer.add(dragMod2).add(new StateModifier({transform: Transform.translate(300,0,0)})).add(dragbox2);
mainContext.add(contentLayer);
});