React-dnd: 질문: 둥근 모서리 요소를 끌 때 정사각형 모서리를 투명하게 만드는 방법은 무엇입니까?

DragPreview에 CustomDragLayer를 사용하고 있습니까? 정사각형 모서리가 나타납니다.
더 둥근 것들과 함께?

스크린샷은 무슨 일이 일어나는지 확인하는 데 도움이 됩니다.

2017년 6월 7일 수요일 00:53 nottoseethesun [email protected]에서 다음과 같이 썼습니다.

모서리가 둥근 드래그 가능한 요소가 있으며 드래그하면
요소의 정사각형 모서리는 다른 밝은 회색으로 표시됩니다.
요소의 할당된 배경색에서.

나는 그것이 사라지고 싶기 때문에 둥근 모서리가 있는 요소만
나타나다.

이것을 끄기 위해 할 수 있는 일이 있습니까? 유령과 같은
적용될 수 있는 이미지는?

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/react-dnd/react-dnd/issues/788 또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

문안 인사,
가간

감사합니다. CustomDragLayer 사용하지 않습니다. 모든 것이 평범합니다.

스크린샷에서는 불행히도 불가능하지만 더 잘 설명할 수 있습니다. draggable은 모서리가 둥근 모서리(테두리 반경 10px)가 있는 각 면이 약 1인치인 정사각형 div입니다. 드래그 가능 항목은 드래그할 때 모든 면에서 정상으로 보입니다(여전히 둥근 모서리와 적절한 색상이 있음). 한 가지를 제외하고는 다음과 같습니다. 네 개의 둥근 모서리가 각각 표시됩니다. 단, 반올림되지 않은 부분의 색상은 드래그 가능의 상위 요소(드래그를 가져온 상위 요소)의 색상입니다. 따라서 각 둥근 모서리는 불행하게도 Chrome 브라우저에서만(Firefox 또는 Safari가 아님) 둥근 모서리가 없는 것처럼 div의 나머지 표면 영역인 작은 "모자"와 함께 제공됩니다.

Chrome이 div를 스냅샷하고 메모리에 유지하는 것과 거의 같습니다. 이 전에 실제로 endDrag 문제가 있었고 데스크탑에서 웹 브라우저 외부를 클릭했을 때 설명된 대로 드래그 가능한 것을 볼 수 있었습니다.

WebkitTapHighlightColor (React identifier format) 을 transparent 설정하려고 시도했지만 해결되지 않았습니다.

이상하다. CustomPreview를 사용하지 않는 경우 정확히 동일합니다.
드래그를 시작하기 전에 렌더링된 것은 미리보기여야 합니다.
요소의 브라우저 스냅샷에 따라 다름)

에 설명된 것보다 더 많은 작업을 수행하고 있는지 확인할 수 있습니까?
이 예 -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

이 리포지토리를 복제하고 이 예제에 borderRadius를 추가하면 다음과 같이 표시됩니다.
그것은 완벽하게 잘 작동합니다!

2017년 6월 7일 수요일 09:19 nottoseethesun [email protected]에서 다음과 같이 썼습니다.

감사합니다. CustomDragLayer를 사용하지 않습니다. 모든 것이 평범합니다.

스크린샷에서는 불행히도 불가능하지만 설명할 수 있습니다.
더 나은: draggable은 각 면이 약 1인치인 정사각형 div입니다.
둥근 모서리(테두리 반경 10px). 드래그 가능, 드래그하면 모양
모든 면에서 정상(여전히 둥근 모서리와 적절한 색상이 있음)
한 가지를 제외하고: 4개의 둥근 모서리가 각각 다음과 같이 나타납니다.
요소에 테두리 반경이 반올림되지 않는 경우와 마찬가지로
반올림되지 않은 부분의 색상이 부모의 색상이라는 점을 제외하고
draggable의 요소(끌어온 부모 요소). 그래서
각 둥근 모서리는 불행하게도 Chrome 브라우저에서만 동반됩니다.
Firefox 또는 Safari), 표면의 나머지 부분인 작은 "모자"와 함께
둥근 모서리가 없는 div의 영역입니다.

Chrome이 div의 스냅샷을 생성하고 저장하는 것과 거의 같습니다.
메모리. 이 이전에는 실제로 endDrag에 문제가 있었고
바탕 화면에서 웹 브라우저 밖을 클릭했는데
설명된 대로 드래그할 수 있습니다.

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.

이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

문안 인사,
가간

감사합니다. 나는 그 예에서 border-radius 를 시도했고 실제로 당신이 옳았습니다. 그러나 올바르게 보이는 이유는 전체 작업 영역이 동일한 배경색이기 때문입니다. Chrome의 html 요소 기본 고스트 이미지를 다른 배경색으로 드래그하면 해당 모서리가 표시됩니다. 제 경우에는 그런 상황이 있습니다. 고스트 이미지를 지정하여 성공적으로 해결할 수 있습니다.

이 같은 문제가 발생했습니다. 궁극적으로 드래그 미리보기로 원하는 노드에 transform: 'translate(0, 0)' 를 추가하여 문제를 해결했습니다. 이 페이지에서 몇 가지 통찰력을 얻었습니다. https://kryogenix.org/code/browser/custom-drag-image.html 모서리가 있는 위치와 사라진 위치에 대한 예제를 보여줍니다.

@douweknook 감사합니다. 해결책을 찾는 데 상당한 시간이 걸렸습니다.

@douweknook 멋진 솔루션!

간단한 CSS 구현은 다음과 같습니다.

    .sortable-chosen {
        transform: translate(0, 0);
    }

스타일이 전역적으로 적용되지 않도록 .sortable-chosen을 정렬 가능한 요소 클래스에 연결합니다. 예를 들어, 정렬 가능한 요소 클래스가 "item"인 경우 대신 .item.sortable-chosen을 사용하십시오!

@douweknook YAY....... 감사합니다. 순수 자바스크립트 탱크에서도 문제를 해결했습니다.

@douweknook 당신은 신사이자 학자입니다. 이것은 경계 반경 문제를 해결하는 데 효과가 있었지만 여전히 상자 그림자가 잘립니다. 참고: 이것은 Firefox에서 제대로 작동합니다.

관심 있는 사람을 위해 별도의 문제를 만들었습니다. https://github.com/react-dnd/react-dnd/issues/2762