在“结束”之后获得着名的“Draggable”的位置，直到“Transition”结束

Question

使用着名的流星和着名观点，但在它的核心，这真是一个着名的问题 -

如何在on end事件之后获取Draggable修改器的位置，直到它停止移动？

  

EG。当它弹到一个给定的位置时，它的位置向量是什么？我如何将它放入会话变量等中或将其传送到其他地方？

Answer 1

Pure Famo.us解决方案：在{{1}上使用 update 和 end 事件}。

Draggable

正如您从下面的代码段中看到的，这两个事件将允许您跟踪拖动位置。拖动曲面时，另一个曲面将使用 draggable.on('update', function (e) { var pos = e.position; // Use the updating position here }); draggable.on('end', function (e) { var pos = e.position; // Use the final position here }); 的位置转换为跟随。

已更新：在拖动结束时返回原点变换

＆＃13;

＆＃13;

Draggable

＆＃13;

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 mainContext = Engine.createContext();

    var transTransform = new TransitionableTransform();
    transTransform.set(Transform.translate(100, 0, 0));
    
    var surface = new Surface({
        size: [300, 100],
        properties: {
            backgroundColor: 'rgba(255,0,0,0.1)',
            cursor: 'pointer'
        }
    });

    var dragSurface = new Surface({
        content: 'Drag Me',
        size: [100, 100],
        properties: {
            backgroundColor: 'rgba(0,0,0,0.1)',
            cursor: 'pointer'
        }
    });

    var modifier = new Modifier({
        origin: [0, 0],
        align: [0, 0],
        transform: transTransform
    });

    var draggable = new Draggable();

    draggable.subscribe(dragSurface);

    var content = 'Not Draggable';
    surface.setContent(content);

    mainContext.add(modifier).add(surface);
    mainContext.add(draggable).add(dragSurface);

    draggable.on('update', function (e) {
        var pos = e.position;
        surface.setContent('Draggable Position is '+pos);
        transTransform.set(Transform.translate(pos[0]+100, pos[1], 0));
    });

    draggable.on('end', function (e) {
        var pos = e.position;
        surface.setContent('Draggable End Position is '+pos);
        transTransform.setTranslate([100, 0, 0],{duration: 300});
      this.setPosition([0,0],{duration: 300});
    });
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;

更新：一个更松散耦合的例子。

将事件对象发送到<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>，以便能够侦听自定义事件并使用该对象应用外部转换。

＆＃13;

＆＃13;

EventHandler

＆＃13;

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 mainContext = Engine.createContext();

  var transTransform = new TransitionableTransform();
  transTransform.set(Transform.translate(100, 0, 0));

  var surface = new Surface({
    size: [300, 100],
    properties: {
      backgroundColor: 'rgba(255,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var dragSurface = new Surface({
    content: 'Drag Me',
    size: [100, 100],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var modifier = new Modifier({
    origin: [0, 0],
    align: [0, 0],
    transform: transTransform
  });

  var draggable = new Draggable();

  draggable.subscribe(dragSurface);
  //draggable.pipe(surface._eventOutput);
  surface._eventOutput.subscribe(draggable);
  
  surface.setContent('Not Draggable');
  surface.on('updated', function(e) {
    var pos = e.position;
    this.setContent('Draggable Position is ' + pos);
    transTransform.set(Transform.translate(pos[0] + 100, pos[1], 0));
  });
  surface.on('ended', function(e) {
    var pos = e.position;
    this.setContent('Draggable End Position is ' + e.ending);
    transTransform.setTranslate([pos[0] + 100, pos[1], 0], {
      duration: e.duration
    });
  });

  mainContext.add(modifier).add(surface);
  mainContext.add(draggable).add(dragSurface);

  draggable.on('update', function(e) {
    this.eventOutput.emit('updated', {
      position: e.position
    });
  });

  draggable.on('end', function(e) {
    var finalPos = [0, 0];
    var duration = 300
    this.eventOutput.emit('ended', { position: finalPos, ending: e.position, duration: duration });
    this.setPosition(finalPos, { duration: duration });
  });
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;

新增内容：使用<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>作为转换参考

＆＃13;

＆＃13;

Draggable

＆＃13;

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 mainContext = Engine.createContext();

  var transTransform = new TransitionableTransform();
  transTransform.set(Transform.translate(100, 0, 0));

  var surface = new Surface({
    size: [300, 100],
    properties: {
      backgroundColor: 'rgba(255,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var dragSurface = new Surface({
    content: 'Drag Me',
    size: [100, 100],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var draggable = new Draggable();

  var modifier = new Modifier({
    origin: [0, 0],
    align: [0, 0],
    transform: getTransform
  });

  function getTransform() {
    var pos = draggable.getPosition();
    surface.setContent('Draggable Position is ' + pos);  //needs performance enhancement
    transTransform.setTranslate([pos[0]+100,pos[1],0]);
    return transTransform.get();
  }

  draggable.subscribe(dragSurface);

  surface.setContent('Not Draggable');

  mainContext.add(modifier).add(surface);
  mainContext.add(draggable).add(dragSurface);

  draggable.on('update', function(e) {
    
  });

  draggable.on('end', function(e) {
    var finalPos = [0, 0];
    var duration = 300
    this.setPosition(finalPos, {
      duration: duration
    });
  });
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;

新：使用<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>作为事件的转换参考

＆＃13;

＆＃13;

Draggable

＆＃13;

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 mainContext = Engine.createContext();

  var transTransform = new TransitionableTransform();
  transTransform.set(Transform.translate(100, 0, 0));

  var surface = new Surface({
    size: [300, 100],
    properties: {
      backgroundColor: 'rgba(255,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var dragSurface = new Surface({
    content: 'Drag Me',
    size: [100, 100],
    properties: {
      backgroundColor: 'rgba(0,0,0,0.1)',
      cursor: 'pointer'
    }
  });

  var draggable = new Draggable();

  var modifier = new Modifier({
    origin: [0, 0],
    align: [0, 0],
    transform: transTransform
  });

  function getTransform() {
    var pos = draggable.getPosition();
    surface.setContent('Draggable Position is ' + pos);
    transTransform.setTranslate([pos[0] + 100, pos[1], 0]);
    return transTransform.get();
  }

  draggable.subscribe(dragSurface);
  surface._eventOutput.subscribe(draggable.eventOutput);

  surface.on('updating', function(e) {
    var pos = e.position;
    surface.setContent('Draggable Position is ' + pos);
    transTransform.setTranslate([pos[0] + 100, pos[1], 0]);
  });
  surface.on('startedEnd', function(e) {
    modifier.transformFrom(getTransform);
  });
  surface.on('endedEnd', function(e) {
    modifier.transformFrom(transTransform);
  });

  surface.setContent('Not Draggable');

  mainContext.add(modifier).add(surface);
  mainContext.add(draggable).add(dragSurface);

  draggable.on('update', function(e) {
    this.eventOutput.emit('updating', {
      position: e.position
    });
  });

  draggable.on('end', function(e) {
    var finalPos = [0, 0];
    var duration = 2000
    this.eventOutput.emit('startedEnd', {
      position: e.position,
      finalPos: finalPos
    });
    this.setPosition(finalPos, {
      duration: duration
    }, function() {
      this.eventOutput.emit('endedEnd', {
        position: this.position
      });
    }.bind(this));
  });
});

// Start Main App
require(['main']);

＆＃13;

＆＃13;

＆＃13;