React-dnd: タッチバックエンド

作成日 2014年10月27日  ·  25コメント  ·  ソース: react-dnd/react-dnd

タッチデバイス用に自動的にスイッチインされるタッチバックエンドがあったとしたら、それはキラーでしょう。

enhancement

最も参考になるコメント

私の後に来る人のために、ここに進むべき道があるようですhttps://github.com/LouisBrunner/react-dnd-multi-backend

全てのコメント25件

確かに! 来週調べます。

私はpointer-eventsを使用してこのようなことをしました:none; そのため、ドラッグされているアイテムの下の要素がマウスオーバーイベントをキャッチする可能性があります。 私はこれに取り組むために他にどのような方法があるのか​​を見たいと思っています

touchmoveを使用した最先端のドラッグアンドドロップライブラリとは何ですか? jQuery UI? 良い解決策を検討し、そのトリックを採用する必要があります。

私はプロジェクトでこれらのどれも使用していませんが、グーグルは見つけました:

このライブラリの精神では、DOM操作(一般的なライブラリのように、プレビュー用にノードのクローンを作成したり、translateX / 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を使用して別のトップレベルのコンポーネントを作成し、現在ドラッグされているアイテムを絶対位置にレンダリングすると便利です。

これは非常に理にかなっています。 デスクトップでもモバイルでも、ほとんどすべてのブラウザで、画面上のアイテムをスムーズにアニメーション化できるはずです。 これにより、カードを移動するときにTrelloが行うようなクールな3D効果を簡単に追加できます。

これにより、ドラッグ中にマウスカーソルを設定し、より柔軟なプレースホルダーレンダリングを行うこともできます...ネイティブDNDAPIでは実際にはできないこと

この「ドラッグレイヤー」APIをブラウザのD&DAPIで利用できるようにすることもできることに気づきました。 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をデフォルトのバックエンドとして使用し、タッチベース/マウスモーブベースのバックエンドをオプトインしたいと思います。

HTML5 D&Dが最も単純なものになります(ドラッグレイヤーは不要で、すべてがブラウザーによって管理されます)。 mousemove / touchmoveのものをオプトインするには、ドラッグレイヤーを実装して好きなものを描画する必要があります。

意味がありますか?

確かに、それは私が起こることを望んでいたことです。
HTML5 D&Dは高速で、(癖は別として)非常に簡単に使用できるため、デフォルトでは当然の選択です。

そのため、このドラッグアンドドロップタッチを有効にするように要求されました。 誰かがこれをして、ヒントを共有したいですか?

@ジョーゼット

@nelixmousemoveバックエンドで作業を開始しました。その後、 touchmoveバックエンドを実行します。

https://github.com/nelix/react-dnd/commit/8de7f7fe24c7ae397a971c517dada9323e6c27f0で進行中の作業を確認できDragDropMixin留まり、どの部分をbackends/HTML5 (およびその他のバックエンド)に移動する必要があるかを把握する必要があります。

その作業をしたい場合は、そのコミットから始めて、mousemoveバックエンドの実装を続けることができます。 それが機能するとき、同様のtouchmoveバックエンドを実装するのは難しいことではありません。

これに取り組みたい場合は、ここまたはGitterルームで最新情報を入手してください。そうすれば、2つの実装で終わることはありません。

タッチサポートの概念実証は次のとおりです: https

あなたはそれで遊ぶことができます: http

デスクトップではHTML5バックエンドを使用し、モバイルではタッチバックエンドを使用します。
カスタムレンダリングの例のみが、モバイルでのドラッグプレビューを表示します。

これは非常に有望なようです! これがいつ着陸するかについてのアイデアはありますか? :)

私は現在別のプロジェクトで忙しく、7月までです。
私は7月か8月のどこかでこれに取り組むことができるかもしれません、しかし誰かがそれに私を殴ったら私は幸せです:-)

このスレッドでは1.1が言及されており、v1.1.4がリリースされているためです。 上記の概念実証がすでに1.1.4に含まれているのかどうか疑問に思っていますか?

いいえ。

正確なバージョン番号を使用するべきではなかったので、いつぶつかるのかわからないからです:-)

現在、これに取り組む時間はありませんが、概念実証はPRにあります。 おそらく、現在のAPIを反映するようにPRを更新し、誰かが実際にそれを実装するのを待ちます。

参考: 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は、互いに素な一連のイベントをリッスンします。 (ドラッグスタート、ドラッグエンド、ドラッグエンター、ドラッグリーブドラッグオーバー、ドロップ対タッチスタート、タッチエンド、タッチムーブ)。

いくつかの基本的なテストとそれはうまく機能します、私のドラッグアンドドロップは今タッチとマウスイベントを同時にサポートします。

それが機能しない理由はありますか?

このページは役に立ちましたか?
0 / 5 - 0 評価