我将两个可拖动的ContainerSurfaces(dragbox1& dragbox2)添加到另一个透明的ContainerSurface(panLayer)上,它也是可拖动的。这样可以进行平移,同时还可以单独拖动两个框。
这在Famo.us 0.2中有效,但自从我开始使用版本0.3以来,拖动框也会激活平移。 如何阻止拖拽事件传播?
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);
});