タッチデバイス用に自動的にスイッチインされるタッチバックエンドがあったとしたら、それはキラーでしょう。
確かに! 来週調べます。
私は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
を使用できるため、現在のドラッグ位置を学習し、ドラッグが発生したときに実際の要素を移動できます。
アイテムが画面上で異なるコンテナ間でドラッグされるTrelloなどのアプリの場合、 DragLayerMixin
を使用して別のトップレベルのコンポーネントを作成し、現在ドラッグされているアイテムを絶対位置にレンダリングすると便利です。
これは非常に理にかなっています。 デスクトップでもモバイルでも、ほとんどすべてのブラウザで、画面上のアイテムをスムーズにアニメーション化できるはずです。 これにより、カードを移動するときにTrelloが行うようなクールな3D効果を簡単に追加できます。
これにより、ドラッグ中にマウスカーソルを設定し、より柔軟なプレースホルダーレンダリングを行うこともできます...ネイティブDNDAPIでは実際にはできないこと
@nelix @KyleAMathews
ここに概念実証があります: http ://gaearon.github.io/react-dnd/#/drag -around-experimental
動かすと点滅します:-)(Firefoxではまだ動作しません)
関連するソースコード:
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は高速で、(癖は別として)非常に簡単に使用できるため、デフォルトでは当然の選択です。
そのため、このドラッグアンドドロップタッチを有効にするように要求されました。 誰かがこれをして、ヒントを共有したいですか?
@ジョーゼット
@nelixはmousemove
バックエンドで作業を開始しました。その後、 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-backend
とreact-dnd-touch-backend
は、互いに素な一連のイベントをリッスンします。 (ドラッグスタート、ドラッグエンド、ドラッグエンター、ドラッグリーブドラッグオーバー、ドロップ対タッチスタート、タッチエンド、タッチムーブ)。
いくつかの基本的なテストとそれはうまく機能します、私のドラッグアンドドロップは今タッチとマウスイベントを同時にサポートします。
それが機能しない理由はありますか?
最も参考になるコメント
私の後に来る人のために、ここに進むべき道があるようですhttps://github.com/LouisBrunner/react-dnd-multi-backend