React-dnd: 子ノードでtranslate3dを使用すると、DragPreviewの位置が正しくなくなります。

作成日 2015年08月19日  ·  5コメント  ·  ソース: react-dnd/react-dnd

ねえ!

ある時点でtranslate3dcssスタイルを含む要素をドラッグ可能にしようとしています。 残念ながら、これによりドラッグレイヤー全体が再配置されます。 translate3dはルート要素ではなく、その子ノードにあるため、理由はよくわかりません。

私はあなたに問題を示す非常に簡単な例を組み立てました。 (これを機能させるには、ReactDnDをホストするCDNが見つからなかったため、ReactDnD.min.jsを「./scripts/react-dnd-1.1.4/dist」フォルダーに配置する必要があります)。

手伝ってくれてありがとう!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DragPreview with wrong position example</title>

        <script src="http://fb.me/react-with-addons-0.13.3.js"></script>
        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
        <script src="scripts/react-dnd-1.1.4/dist/ReactDnD.min.js"></script>

        <style>
            .ReactDnDElement {
                background: red;
                overflow: hidden;
                width: 200px;
                height: 100px;
            }

            .ReactDnDElement .wrapper {
                display: flex;
                align-items: center;
                width: 600px;
                height: 100%;
                transform: translate3d(-275px, 0, 0);
            }

            .ReactDnDElement .wrapper div {
                width: 150px;
                height: 50%;
            }

            .ReactDnDElement .wrapper div.green { background: green; }
            .ReactDnDElement .wrapper div.blue { background: blue; }
            .ReactDnDElement .wrapper div.yellow { background: yellow; }
            .ReactDnDElement .wrapper div.magenta { background: magenta; }
        </style>
    </head>

    <body>
        <script type="text/jsx">
            /* ReactDnDApp */

            var ReactDnDApp = React.createClass({
                render: function() {
                    return (
                        <ReactDnDElement></ReactDnDElement>
                    );
                }
            });

            ReactDnDApp = ReactDnD.DragDropContext(ReactDnD.HTML5)(ReactDnDApp)


            /* ReactDnDElement */

            var ReactDnDElement = React.createClass({
                render: function() {
                    return this.props.connectDragSource(
                        this.props.connectDragPreview(
                            <div className="ReactDnDElement">
                                <div className="wrapper">
                                    <div className="green"></div>
                                    <div className="blue"></div>
                                    <div className="yellow"></div>
                                    <div className="magenta"></div>
                                </div>
                            </div>
                        )
                    );
                }
            });

            ReactDnDElement = ReactDnD.DragSource("dndElement", {
                beginDrag: function(props) {
                    return {};
                }
            }, function(connect, monitor) {
                return {
                    connectDragSource: connect.dragSource(),
                    connectDragPreview: connect.dragPreview()
                };
            })(ReactDnDElement);


            /* RUN IT! */

            React.render(React.createElement(ReactDnDApp), document.body);
        </script>
    </body>
</html>
bug wontfix

最も参考になるコメント

まあ、私はブラウザの人がこの問題をすぐに修正することを願っています。

ありそうもない。 HTML5のドラッグアンドドロップはIE5の動作に加えて標準化されており、壊れており、長年にわたって一貫性がありませんでした。 ウェブがより複雑になるにつれて、私はそれが悪化するだけで、良くなることはないと思います。 カスタムのマウスとタッチの処理はより良い解決策であり、そのようなReactDnDバックエンドが公開されることを楽しみにしています。

全てのコメント5件

ネイティブのhtml5ドラッグアンドドロップ機能にも問題があるようです。 ネイティブのhtml5ドラッグアンドドロップメソッドで同じことを試してみると、FirefoxとSafariでは正しく機能しますが、chromeとoperaでは機能しません。

react-dndでは、この問題はサファリには存在しませんが、クロム、オペラ、およびFIREFOXの場合は存在します。

クロムの問題を開きました: https

このバグを修正する意図はありますか?

厄介なもの。 私はこれに2時間費やしたばかりで、それを機能させる方法がわかりません。

これは、それらのひどいブラウザの不整合の1つのようです。 dataTransfer.setDragImage渡された同じxy値は、操作した要素の子が親に対して負のオフセットで配置されている場合、ブラウザーによって異なる方法で解釈されます。 変換を正の変換に変更すると、魔法のように機能することに注意してください。

Firefoxの一部のバニラHTML5ドラッグアンドドロップの例でこの問題が発生しない理由は、 xy指定されておらず、デフォルト値が「正常に機能する」ことが判明したためと考えられます。 」。 ただし、ほとんどの場合、適切な場所に表示されるドラッグされたアイテムに対してそれらを指定する必要があります。

ここに実行可能な回避策があるとは思えません。 ドラッグソースノードの深くネストされた子のいずれかが左端または上端の境界から外れると、一部のブラウザでsetDragImage(node, x, y)が正しく機能しなくなります。 繰り返しになりますが、一部のブラウザで修正しようとしても、他のブラウザでは確実に修正されるため、確実に修正できるとは思いません。

終了しますが、回避策を探してください。 今のところ、ドラッグソース内の負の変換を避けることをお勧めします。 変換されたラッパーの内部にconnectDragSource移動できることに注意してください。

.ReactDnDElement {
    background: red;
    overflow: hidden;
    width: 200px;
    height: 100px;
}

.ReactDnDElement .transform {
    transform: translate3d(-275px, 0, 0);
    width: 100%;
    height: 100%;
}

.ReactDnDElement .wrapper {
    display: flex;
    align-items: center;
    width: 600px;
    height: 100%;
}

.ReactDnDElement .wrapper div {
    width: 150px;
    height: 50%;
}

.ReactDnDElement .wrapper div.green { background: green; }
.ReactDnDElement .wrapper div.blue { background: blue; }
.ReactDnDElement .wrapper div.yellow { background: yellow; }
.ReactDnDElement .wrapper div.magenta { background: magenta; }
var ReactDnDElement = React.createClass({
    render: function() {
      return (
        <div className="ReactDnDElement">
          <div className="transform">
            {this.props.connectDragSource(
              <div className="wrapper">
                <div className="green"></div>
                <div className="blue"></div>
                <div className="yellow"></div>
                <div className="magenta"></div>
              </div>
            )}
          </div>
        </div>
      );
    }
});

ただし、この方法では、子パーツのみがドラッグイメージとして使用されます。これが必要かどうかはわかりません。

screen shot 2015-09-17 at 17 48 31

残念ながら、これは私が提案できる最善の方法です。 これが大きな問題である場合は、HTML5の代わりに代替のReact DnDバックエンドを使用することを検討してください。たとえば、#70のようなマウスバックエンドは、 setDragImage依存しないため、この問題は発生しません。 setDragImage依存しないカスタムドラッグレイヤーを使用

ねえ! これを見てくれてありがとう。 はい、確かに厄介なものです! まあ、私はブラウザの人がこの問題をすぐに修正することを願っています。

まあ、私はブラウザの人がこの問題をすぐに修正することを願っています。

ありそうもない。 HTML5のドラッグアンドドロップはIE5の動作に加えて標準化されており、壊れており、長年にわたって一貫性がありませんでした。 ウェブがより複雑になるにつれて、私はそれが悪化するだけで、良くなることはないと思います。 カスタムのマウスとタッチの処理はより良い解決策であり、そのようなReactDnDバックエンドが公開されることを楽しみにしています。

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