用惯性实现可拖动元素

Question

我刚偶然发现了新的著名的0.5版本，情况似乎完全不同（看起来不错）。我想用惯性实现一个可拖动元素，但是我无法通过查看新文档来解决它。

任何人都可以给我一些有关如何操作的提示吗？

Answer 1

这里是使用GestureHandler跟踪著名引擎中拖动的开始，移动和结束的简单示例。 Position组件将相对于拖动事件的增量放置节点。请注意如何将node传递给GestureHandler以跟踪我们的拖动事件。

警告：截至本文发布之时，该引擎仍处于Beta（0.5.2）中，因此存在试图将其拖到元素外部附近的情况。它可能与渲染更新的默认间隔有关。

var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);

function Draggable(root) {
  this.node = root;
  this.node
    .setProportionalSize(0.5, 0.5)
    .setMountPoint(0.5, 0.5);

  this.position = new Position(this.node);
  console.log(this.position);

  var base = (Math.random() * 360) | 0;

  this.el = new DOMElement(this.node, {
    properties: {
      'textAlign': 'center',
      'color': 'white',
      'fontSize': '30px',
      'lineHeight': '40px',
      'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
      'cursor': 'pointer'
    }
  });

  this.el.setContent('Drag Me');

  var gestures = new GestureHandler(this.node, [{
    event: 'drag',
    callback: drag.bind(this)
  }]);

  function drag(e) {
    //console.log('drag', e.status, e);
    switch (e.status) {
      case 'start':
        console.log('start drag', this.position.getValue());
        break;
      case 'end':
        console.log('end drag', this.position.getValue());
        break;
      case 'move':
        var d = e.centerDelta;

        console.log('move drag', this.position.getValue(), d);
        var pos = this.position.getValue();
        this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
        break;
    }
  }
}

var dragger = new Draggable(rootNode);
FamousEngine.init();

运行代码段示例

var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;

var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);

function Draggable(root) {
  this.node = root;
  this.node
    .setProportionalSize(0.5, 0.5)
    .setMountPoint(0.5, 0.5);

  this.position = new Position(this.node);
  console.log(this.position);

  var base = (Math.random() * 360) | 0;

  this.el = new DOMElement(this.node, {
    properties: {
      'textAlign': 'center',
      'color': 'white',
      'fontSize': '30px',
      'lineHeight': '40px',
      'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
      'cursor': 'pointer'
    }
  });

  this.el.setContent('Drag Me<hr>');

  var gestures = new GestureHandler(this.node, [{
    event: 'drag',
    callback: drag.bind(this)
  }]);

  function drag(e) {
    //console.log('drag', e.status, e);
    switch (e.status) {
      case 'start':
        console.log('start drag', this.position.getValue());
        break;
      case 'end':
        console.log('end drag', this.position.getValue());
        break;
      case 'move':
        var d = e.centerDelta;

        console.log('move drag', this.position.getValue(), d);
        var pos = this.position.getValue();
        this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
        break;
    }
  }
}

var dragger = new Draggable(rootNode);
FamousEngine.init();

html,
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  body {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-perspective: 0;
    perspective: none;
    overflow: hidden;
  }

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Draggable [email protected]">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>