1

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);
});
Mike
  • 13
  • 4

0 Answers0