在 `on end` 之后获取著名的 `Draggable` 的位置，直到 `Transition` 结束

Question

将 famous 与 meteor 和 famous-views 结合使用，但从本质上讲，这确实是一个著名的问题 —

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

Eg. while it's bouncing into a given position what is it's position vector? How can I put this into a session var etc. or pipe it somewhere else?

Answer 1

纯Famo.us解决方案：使用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
    });

正如您从下面的代码片段中看到的，这两个事件将允许您跟踪拖动位置。当您拖动表面时，另一个表面会使用 Draggable.

的位置进行转换以跟随

已更新：returns 拖动结束时原点变换

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']);

<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>

更新：更松散耦合的示例。

向 EventHandler 发送一个事件对象，以便能够侦听自定义事件并使用该对象应用您的外部转换。

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']);

<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>

新：使用 `Draggable` 作为转换参考

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']);

<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>

新：使用 `Draggable` 作为事件的转换参考

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']);

<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>

在 `on end` 之后获取著名的 `Draggable` 的位置，直到 `Transition` 结束

Get position of famous `Draggable` after `on end` and until `Transition` ends

meteor

famo.us

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

已更新：returns 拖动结束时原点变换

更新：更松散耦合的示例。

新：使用 Draggable 作为转换参考

新：使用 Draggable 作为事件的转换参考

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

新：使用 `Draggable` 作为转换参考

新：使用 `Draggable` 作为事件的转换参考