如何获取Famo.us可拖动修改器的渲染节点 [英] How to get Famo.us draggable modifier's render node

问题描述

我正在尝试在结束事件上获取可拖动修饰符的父renderNode，是否有任何API获取可拖动所属的renderNode？我的代码如下：

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;
});

在向左拖动表面时，一旦达到阈值，我想删除renderNode ，

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
            });
         }
       });

如果我只是使用renderNode的名称，即nodePlayer，它将删除最后一个曲面

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.

最好的问候。

推荐答案

有很多方法可以完成您想做的事情。

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

由于您在可拖动对象上使用了 end 事件，并且使用了位置值，让我们将引用绑定到所需的项目以能够访问它们。

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.

RenderNode .remove（）方法$ c>，因此该示例显示了一种使用 RenderController 从视图中删除节点的方法。

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.

记住：无需从DOM中删除节点。 Famo.us将管理渲染树中的可渲染对象。

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>

这篇关于如何获取Famo.us可拖动修改器的渲染节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！