React-dnd: 触摸后端

创建于 2014-10-27  ·  25评论  ·  资料来源: react-dnd/react-dnd

如果有一个触摸后端可以自动为触摸设备接通,那将是杀手er。

enhancement

最有用的评论

对于那些追随我的人来说,这似乎是前进的道路https://github.com/LouisBrunner/react-dnd-multi-backend

所有25条评论

确实! 下周我会调查。

我使用指针事件做了这样的事情: 因此,要拖动的项目下的元素可能会使鼠标悬停在事件上; 我有兴趣看看还有什么其他方法可以解决这个问题

什么是使用touchmove的最新拖放库? jQuery UI? 我们需要寻找一个好的解决方案并采用它的技巧。

我认为最好且本着该图书馆的精神,避免任何DOM操作(如流行的lib一样,是否通过克隆预览节点,更改其translationX / Y等),而是让消费者绘制“拖动层”并为此提供消费者必要的数据。

换句话说,如果使用触摸后端拖动Card组件,则react-dnd不会尝试以某种方式移动它本身。 由您决定在应用程序顶部渲染一些“图层”组件。 这个组件将使用react-dnd提供的DragLayerMixin来了解当前元素,它的位置等。它决定如何根据其类型渲染所拖动的项目,并且也是100%React。

var App = React.createClass({
  render() {
    return (
      <div>
       {this.props.activeRouteHandler />
       <DragDropLayer />
      </div>
    );
  }
});

var { DragLayerMixin } = require('react-dnd');

var DragDropLayer = React.createClass({
  mixins: [DragLayerMixin],

  render() {

    // With non-native dragging backend, rendering items in the process of dragging is your responsibility. 
    // It's up to you to use translate3d or top/left, render thumbnails or real components, etc.

    var {
      draggedItem,
      draggedItemType,
      clientX,
      clientY
    } = this.getDragLayerState(); // provided by mixin

    if (!draggedItem) {
      return null;
    }

    return (
      <div style={{zIndex: 10000, pointerEvents: 'none', position: 'absolute'}}>
        {draggedItem &&
          <div style={{transform: `translate3d(${clientX}, ${clientY}, 0)`}}>
            {this.renderItem(draggedItemType, draggedItem)}
          </div>
        }
      </div>
    );
  },

  renderItem(type, item) {

    // It's completely up to the consumer to specify how to render different types

    switch (type) {
    case ItemTypes.Card:
      return <Card title={item.title} />;
    case ItemTypes.List:
      return <img src='thumbnail.jpg' />;
  }
});

顺便说一句,这种方法提供了非常酷的可能性,因为对于某些应用程序,拖动层是包含可拖动项的。 拖动层不必分开,尽管可以,但是可以分开。

对于将项目拖到某个容器上的应用程序,此容器可以使用DragLayerMixin并因此了解当前拖动位置并在发生拖动时移动实际元素:

screen shot 2014-10-28 at 20 30 15

对于诸如Trello之类的应用程序,这些应用程序将项目拖到不同容器中的屏幕上,最好使用DragLayerMixin来使用一个单独的顶层组件来呈现绝对位置的当前拖动的项目。

这很有道理。 几乎所有浏览器,无论是台式机还是移动式浏览器,都应该能够在屏幕上平滑地动画化项目。 这样可以轻松地添加酷的3d效果,就像Trello在移动卡时一样。

这也将允许在拖动时设置鼠标光标和更灵活的占位符呈现...使用本机DND API确实无法做到的事情

我刚刚意识到,我们也可以使该“拖动层” API可用于浏览器D&D API。 只需像本例中那样将dragImage设置为透明像素然后绘制所需的任何内容即可。

@nelix @KyleAMathews

我在这里有一个概念证明: http ://gaearon.github.io/react-dnd/#/drag -around-experimental

当您移动它时它会闪烁:-)(在Firefox中尚不可用)

相关源代码:

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/index.js#L14

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/DragLayer.js

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69

如您所见,这取决于用户在其上绘制拖动层和组件,因此它确实很灵活。

我将在本周尝试完成此操作,以此作为获得支持的垫脚石,在此之后,对于触摸模式进行同样的操作应该不难。

我们像这样使用拖动层,但是我们使用onMouseMove等,以便您可以更改鼠标光标...
对我们来说是一个很小但非常重要的问题。 它还允许使用大多数用于触摸和指针事件的相同代码。
对于我来说,DragLayer仍然是朝着正确方向迈出的一步,一旦您实现了触摸支持,如果您有兴趣将其作为功能部件,那么我愿意尝试扩展该功能以支持指针和鼠标事件吗?

我想将HTML5 D&D API用作默认后端,然后选择启用基于触摸/基于mouseemove的后端。

HTML5 D&D将是最简单的方法(不需要拖动层,所有内容都由浏览器管理)。 选择使用mousemove / touchmove鼠标将需要您实现一个拖动图层以绘制您喜欢的任何东西。

说得通?

当然可以,这就是我希望会发生的事情。
HTML5 D&D快速且易于使用(除了怪癖),因此默认情况下它是显而易见的选择。

因此,我只是请求启用此拖放触摸。 有没有人做过并想分享技巧?

@乔治

@nelixmousemove后端上开始工作,之后我们将在touchmove后端上进行。

您可以在此处查看进行中的工作: https : DragDropMixin ,哪些部分需要移入backends/HTML5 (以及其他后端)。

如果您想进行此操作,则可以从该提交开始,并继续实现mousemove后端。 当它工作时,不难实现类似的touchmove后端。

请,如果您要进行此工作,请在此处或Gitter会议室中向我们更新,因此我们不会以两种实现结尾。

这是触摸支持概念的证明: https :

您可以使用它: http :

它在桌面上使用HTML5后端,在移动设备上使用触摸后端。
自定义渲染示例将在移动设备上显示拖动预览。

这似乎很有希望! 关于何时降落有什么想法? :)

我目前正忙于另一个项目,要等到7月。
我可以在7月或8月的某个地方进行此工作,但是如果有人击败我,我会很高兴的:-)

因为在此线程中提到了1.1,而v1.1.4已发布。 我只是想知道上述概念证明是否已包含在1.1.4中?

不。

我不应该使用精确的版本号,因为您永远不知道什么时候碰到:-)

我目前没有时间从事此工作,但是概念证明在PR中。 我可能会更新PR来反映当前的API,并等待有人实际实现它。

让我们继续在https://github.com/gaearon/react-dnd/pull/240中进行讨论

仅供参考: https :

对于那些追随我的人来说,这似乎是前进的道路https://github.com/LouisBrunner/react-dnd-multi-backend

我写了这段代码:

function multiBackends(...backendFactories) {
  return function(manager) {
    const backends = backendFactories.map(b => b(manager));
    return {
      setup: (...args) =>
          backends.forEach(b => b.setup.apply(b, args)),
      teardown: (...args) =>
          backends.forEach(b => b.teardown.apply(b, args)),
      connectDropTarget: (...args) =>
          backends.forEach(b => b.connectDropTarget.apply(b, args)),
      connectDragPreview: (...args) =>
          backends.forEach(b => b.connectDragPreview.apply(b, args)),
      connectDragSource: (...args) =>
          backends.forEach(b => b.connectDragSource.apply(b, args)),
    };
  };
}

我这样使用:

DragDropContext(multiBackends(
      ReactDnDHTML5Backend,
      ReactDnDTouchBackend,
  ))

react-dnd-html5-backendreact-dnd-touch-backend收听不连续的事件集。 (dragstart,dragend,dragenter,dragleave拖曳以及放置vs touchstart,touchend和touchmove)。

一些基本的测试并且运行良好,我的拖放现在同时支持触摸和鼠标事件。

有什么原因不起作用吗?

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

BrennanRoberts picture BrennanRoberts  ·  3评论

Okami92 picture Okami92  ·  3评论

rubayethossain picture rubayethossain  ·  3评论

FutureProg picture FutureProg  ·  3评论

redochka picture redochka  ·  3评论