Physics problem? or understanding of physics + draggable problem ?

gistfile1.txt

    // import dependencies
    // Core
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Surface = require('famous/core/Surface');
    var Scene = require("famous/core/Scene");
    var View = require('famous/core/View');
    var Draggable = require('famous/modifiers/Draggable');
    var EventHandler = require('famous/core/EventHandler');
    var Vector = require('famous/math/Vector');
    var GridLayout = require('famous/views/GridLayout');

    // Surfaces
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var ContainerSurface = require('famous/surfaces/ContainerSurface');

    var InputSurface = require('famous/surfaces/InputSurface');

    // Physics
    var PhysicsEngine = require('famous/physics/PhysicsEngine');
    var Rectangle = require('famous/physics/bodies/Rectangle');
    var Wall = require('famous/physics/constraints/Wall');
    var Drag = require('famous/physics/forces/Drag');
    // Modifiers
    var StateModifier = require('famous/modifiers/StateModifier');

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1000);

    var physicsEngine = new PhysicsEngine();

    var centreOrigin = new StateModifier({
        origin:[0.5,0.5],
    });

    
    var root = mainContext.add(new StateModifier({
        transform:Transform.rotateX(-25)
    }));
    
    var surfaces = [];

    for(var i = 0; i < 3; i++) {
        var surface = new Surface({
                content: "FileName",
                size: [200, 200],
                classes:["backfaceVisibility"],
                properties: {
                  backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
                  color: "#404040",
                  verticalAlign:"middle",
                  textAlign: "center"
                }
          });

        surface.stateModifier = new StateModifier({
            origin:[0.5,0.5]
        });

        surface.physicsBody = new Rectangle(200,200);

        physicsEngine.addBody(surface.physicsBody);

        surface.draggable = new Draggable({
            xRange: [-1000,1000],
            yRange: [-1000,1000]
        });

        surface.pipe(surface.draggable);

        surface.draggable.on("update", function() {
            surface.physicsBody.setPosition(surface.draggable.getPosition());
            console.log("updating");
        });

        // on mouse up instead
        surface.draggable.on("end", function() {
            var pos = surface.draggable.getPosition();
            var impulseVec = new Vector(pos[0]*0.01,pos[1]*0.01,0);
            surface.physicsBody.applyImpulse(impulseVec);
            console.log("end");
        });

        root.add(surface.stateModifier).add(surface.draggable).add(surface);
        
      surfaces.push(surface);
    }


    //grid.sequenceFrom(surfaces);
    

    Engine.on("prerender", function() {
        for (var i = 0;i < surfaces.length;i++)
        {
            surfaces[i].stateModifier.setTransform(surfaces[i].physicsBody.getTransform());
        }
    });