React-dnd: DragPreview는 자식 노드에서 translate3d를 사용할 때 잘못 배치됩니다.

에 만든 2015년 08월 19일 · 5코멘트 · 출처: react-dnd/react-dnd

야!

우리는 어떤 시점에서 translate3d CSS 스타일을 포함하는 요소를 드래그 가능하게 만들려고합니다. 불행히도 이것은 전체 드래그 레이어의 위치를 변경합니다. 나는 translate3d가 루트 요소가 아니라 자식 노드에 있기 때문에 그 이유를 정말로 이해하지 못합니다.

나는 당신에게 문제를 보여주는 매우 간단한 예를 모았습니다. (작동하려면 ReactDnD를 호스팅하는 CDN을 찾지 못했기 때문에 "./scripts/react-dnd-1.1.4/dist"폴더에 ReactDnD.min.js를 배치해야합니다).

도와 주셔서 감사합니다!

<!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

출처

delijah

가장 유용한 댓글

브라우저 담당자가 곧이 문제를 해결하기를 바랍니다.

가능성이 없습니다. HTML5 드래그 앤 드롭은 IE5 동작을 기반으로 표준화되었으며 오랫동안 깨지고 일관성이 없습니다. 웹이 더 복잡 해짐에 따라 더 나아지지 않고 더 나빠질 것이라고 생각합니다. 맞춤형 마우스 및 터치 처리가 더 나은 솔루션이며 그러한 React DnD 백엔드가 게시되기를 기대합니다.

gaearon 에 2015년 09월 24일

👍2

모든 5 댓글

기본 html5 드래그 앤 드롭 기능에도 문제가있는 것 같습니다. 기본 html5 드래그 앤 드롭 방법으로 동일하게 시도하면 firefox 및 safari에서는 올바르게 작동하지만 Chrome 및 Opera에서는 작동하지 않습니다.

react-dnd를 사용하면이 문제는 사파리에 존재하지 않지만 크롬, 오페라 및 FIREFOX에서는 존재합니다.

크롬에 대한 문제를 열었습니다 : https://code.google.com/p/chromium/issues/detail?id=525604

delijah 에 2015년 08월 26일

이 버그를 수정하려는 의도가 있습니까?

delijah 에 2015년 09월 08일

불쾌한 것들. 나는 이것에 단지 두 시간을 보냈고 그것을 작동시키는 방법을 모른다.

이것은 끔찍한 브라우저 불일치 중 하나 인 것 같습니다. 같은 x 및 y 에 전달 된 값 dataTransfer.setDragImage 브라우저에 의해 해석되어 다른 때 부모 오프셋 부정적으로 위치와 상호 작용하는 요소의 자식. 변환을 양수로 변경하면 마술처럼 작동합니다.

Firefox의 일부 기본 HTML5 드래그 앤 드롭 예제에서이 문제가 표시되지 않는 이유는 x 및 y 지정하지 않았고 기본값이 "작동 ”. 그러나 대부분의 경우 올바른 위치에 나타나는 드래그 된 항목에 대해 지정해야합니다 _.

여기에 가능한 해결 방법이 있는지 의심됩니다. 드래그 소스 노드의 깊이 중첩 된 자식이 왼쪽 또는 위쪽 가장자리 경계를 벗어나면 setDragImage(node, x, y) 가 일부 브라우저에서 올바르게 작동하지 않습니다. 다시 말하지만, 일부 브라우저에서 수정하려고하더라도 다른 브라우저에서는 확실히이 문제를 해결할 수 있으므로 안정적으로 수정할 수 없다고 생각합니다.

닫습니다. 해결 방법을 찾으십시오. 지금은 드래그 소스 내부에서 부정적인 변환을 피하는 것이 좋습니다. connectDragSource _inside_ 변환 된 래퍼를 이동할 수 있습니다.

.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 에 의존하지 않는 맞춤 드래그 레이어 를 사용

gaearon 에 2015년 09월 17일

야! 이걸 봐 주셔서 감사합니다. 네, 정말 불쾌한 것! 브라우저 담당자가 곧이 문제를 해결하기를 바랍니다.

delijah 에 2015년 09월 23일

브라우저 담당자가 곧이 문제를 해결하기를 바랍니다.

gaearon 에 2015년 09월 24일

👍2

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React-dnd: DragPreview는 자식 노드에서 translate3d를 사용할 때 잘못 배치됩니다.

가장 유용한 댓글

모든 5 댓글

관련 문제