How to get Famo.us draggable modifier's render node

Question

I am trying to get parent renderNode of a draggable modifier on 'end' event, is there any api to get a renderNode to which draggable belongs to? My code is as follows :

/*globals define*/
define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

  var Draggable = require("famous/modifiers/Draggable");
   var RenderNode = require('famous/core/RenderNode');

    /*
     * @name DragTest
     * @constructor
     * @description
     */

    function DragTest() {
        View.apply(this, arguments);
        _createDragSurface.call(this);
    }

    DragTest.prototype = Object.create(View.prototype);
    DragTest.prototype.constructor = DragTest;

    DragTest.DEFAULT_OPTIONS = {
    };

   function _createDragSurface(){
  var yOffset=0;
  for(var i=0;i<2;i++){

     var draggable = new Draggable({
        xRange: [-220,0],
        yRange: [0,0]
    });

    var dragSurface= new  Surface({
       content:'this is a drag surface',
       size:[150,150],
      properties:{
         marginLeft: '10px',
         backgroundColor:'grey'
      }

     });
    var dragSurfaceModifier= new StateModifier({
      align:[0.5,yOffset]
     });
    yOffset+=0.3;
dragSurface.pipe(draggable);
    draggable.on('end',function(e){

       this.setPosition([0,0,0], {
        method: 'snap',
        period: 300
        });
   });

    var nodePlayer = new RenderNode(draggable);
    nodePlayer.add(dragSurfaceModifier).add(dragSurface);

    this.add(nodePlayer);
  }

   }
    module.exports = DragTest;
});

On drag of a surface to the left, once it reaches threshold, I want to remove the renderNode i.e.,

draggable.on('end',function(e){

      if(e.position[0]<-50){
        renderNode.remove()//how to achieve this part of the code as I dont have an access  to nodePlayer renderNode here.
       }
       else{
           this.setPosition([0,0,0], {
            method: 'snap',
            period: 300
            });
         }
       });

If I simply use the name of a renderNode i.e., nodePlayer it will remove the last surface no matter which surface is been dragged.Any input on this is much appreciated.

Best Regards.

score 0 · Accepted Answer · answered Mar 06 '15 at 20:36

There are a lot of ways to accomplish what you want to do.

Since you are using the end event on the draggable and using the position value from the custom event, let's bind the references to the needed items to be able to access them.

There is not a .remove() method on the RenderNode so the example shows a way you could remove a node from the view with a RenderController.

Remember: There is no need to remove nodes from the DOM. Famo.us will manage the renderables in the render tree.

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Draggable = require('famous/modifiers/Draggable');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');
  var DragTest = require('DragTest');

  var mainContext = Engine.createContext();

  var dragTest = new DragTest();
  mainContext.add(dragTest);

  dragTest.on('removed', function(e) {
    console.log('removed ', e.removedNode);
  });

});
define('DragTest', function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');

  var Draggable = require("famous/modifiers/Draggable");
  var RenderNode = require('famous/core/RenderNode');
  var RenderController = require('famous/views/RenderController');

  /*
   * @name DragTest
   * @constructor
   * @description
   */

  function DragTest() {
    View.apply(this, arguments);
    _createDragSurface.call(this);
  }

  DragTest.prototype = Object.create(View.prototype);
  DragTest.prototype.constructor = DragTest;

  DragTest.DEFAULT_OPTIONS = {};

  function _endingDrag(e) {
    console.log('end position', e.position, this);
    if (e.position[0] < -180) {
      this.renderController.hide(this.nodePlayer, function() {
        this.surface.emit('removed', {
          removedNode: this.nodePlayer
        });
      }.bind(this));
    } else {
      this.draggable.setPosition([0, 0, 0], {
        duration: 300
      });
    }
  }

  function _updatingDrag(e) {
    console.log('update position', e.position);
    this.surface.setContent('Position ' + e.position);
  }


  function _createDragSurface() {
    var yOffset = 0;
    for (var i = 0; i < 2; i++) {


      var dragSurface = new Surface({
        content: 'this is a drag surface',
        size: [150, 150],
        properties: {
          marginLeft: '10px',
          backgroundColor: 'grey'
        }

      });
      var dragSurfaceModifier = new StateModifier({
        origin: [0, 0],
        align: [0.5, yOffset]
      });
      yOffset += 0.3;

      var draggable = new Draggable({
        xRange: [-220, 0],
        yRange: [0, 0]
      });

      var renderController = new RenderController();
      this.add(renderController);

      var nodePlayer = new RenderNode();
      nodePlayer.add(dragSurfaceModifier).add(draggable).add(dragSurface);
      renderController.show(nodePlayer)

      draggable.on('end', _endingDrag.bind({
        draggable: draggable,
        renderController: renderController,
        nodePlayer: nodePlayer,
        surface: dragSurface
      }));
      draggable.on('update', _updatingDrag.bind({
        surface: dragSurface
      }));

      draggable.subscribe(dragSurface);
      dragSurface.pipe(this._eventOutput); // so we can emit a custom removed event to this widget

    }

  }
  module.exports = DragTest;
});

require(['main']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Hi Talves, Thanks for the reply, this solves my problem. I ran into one more issue, on drag "end" event I want to get RenderNode from the draggable surface and add it to a scrollview in one more view(draggable surfaces are in menu view), i.e., detail view. The issue here is when I add render node to a scrollview(I am using flexscroll view) it takes some time to reflect on the screen and events are still bound to a menu view. Is this approach valid or is there any other method to handle drag and drop? — vijay kumar, Mar 08 '15 at 14:18
The best practice might be to create a new view that mimics the original dragged view. Moving the render node around may cause you issues with event Handlers etc. — talves, Mar 08 '15 at 18:45

How to get Famo.us draggable modifier's render node

1 Answers1

Linked