React-dnd: 드래그 가능한 구성 요소 내부의 입력 및 텍스트 영역 문제

이것은 selectstart 이벤트의 등록으로 인해 발생하며 IE 호환성을 위해서만 필요합니다.
저처럼 IE 호환성이 필요하지 않은 경우 다음과 같은 빠른 수정이 가능합니다.
https://github.com/dperetti/react-dnd/commit/06f74ef97e07a9a24c10eab8593f3e2121d4f2ed

신고 해 주셔서 감사합니다! 이 문제를 해결하는 PR을 수락하게되어 기쁩니다.

두 가지 요구 사항이 있습니다.

• 여전히 IE 수정이 필요합니다.
• 다른 브라우저에 preventDefault() 이 필요한지 확인하십시오. 드래그하려는 모든 텍스트 선택을 방해한다고 생각합니다. 실제로 다른 브라우저에서 원치 않는 선택을 방지하는 데 도움이된다면 e.preventDefault() 를 e.target.tagName !== 'input' (하지만 더 똑똑한 것)로 몇 개의 체크로 둘러싸는 것이 좋습니다.

<div contentEditable={isEditing} /> 와 동일한 버그.
또한 편집 할 수 없습니다. Ctrl+A 및 Shift + Arrows 는 작동하지 않습니다.

앞으로 3 주 안에 나는 바쁠 것이고 이것을 고칠 시간이 없습니다.
내가 말했듯이 https://github.com/gaearon/react-dnd/issues/178#issuecomment -108110202에 설명 된대로 수정 된 PR을 수락하게되어 기쁩니다.

이것을 조사하고있었습니다. 전체 handleSelectStart 함수 본문을 주석 처리하면 모든 것이 예상대로 작동합니다. IE11에서 이것을 테스트했고 거기에서도 좋은 것 같습니다.

@gaearon 이벤트를 처리해야하는 이유에 대한 특정 사용 사례 또는 설정이 있는지 알고 있습니까? IE10? 드래그 가능한 노드에서 textarea / input 와 다른 설정이 있습니까? 텍스트 선택 문제가 발생하지 않으며 필요한 경우 CSS user-select 가 preventDefault 이상에서 작동하는지 궁금합니다.

원래 문제는 https://github.com/gaearon/react-dnd/issues/128 이었습니다
문제를 해결하는 PR을 준비 할 수 있지만 https://github.com/gaearon/react-dnd/issues/128 도 계속 작동한다면 큰 도움이 될 것입니다.

내가 조사 할 수 있는지 볼 것입니다. IE9에 대한 간단한 테스트 케이스를 설정하는 방법을 찾아야합니다.

# 128이 수정되기 전에 IE9에서 sortable-simple 예제가 실패했다고 생각합니다.

@gaearon 예, 사용하기에 좋은 예였습니다. 감사합니다. 몇 가지 참고 :

1. 다른 브라우저 (테스트 된 최신 Chrome, Safari, FF 및 IE 11)는 이에 대해 신경 쓰지 않는 것 같습니다. 이벤트를 처리 할 필요가 없습니다.
2. IE9는 e.target.dragDrop() 호출 만 _ 필요한 _ 것으로 보입니다. 텍스트 선택을 해제하는에 드래그 노드를 포장, 전체 드래그를 커버하는 핸들을 생성하여 수행 할 수 있습니다 connectDragPreview 에 핸들 connectDragSource . 이것은 불쾌하게 들릴 수 있지만 AFAIK는 공식적으로 IE9를 지원하지 않으므로 특히 해당 브라우저에서 다른 문제가 발생할 가능성이있는 경우 합리적인 해결 방법입니까?
3. 두 번째 점은 드래그 가능 항목 내에 텍스트 입력이있는 경우에도 유용합니다. 사용자는 전체 노드에 connectDragSource 를 적용하면 마우스를 드래그하여 텍스트를 선택할 수 없지만 (텍스트를 선택하는 대신 노드를 드래그하는 것으로 끝남) 전체 노드의 크기 인 보이지 않는 핸들에 적용합니다. 아주 잘 작동합니다.

이 문제를 어떻게 처리할지 확신 할 수 없습니다. UA 검사에 의지하지 않고는이 문제를 처리 할 수있는 좋은 방법이 있다는 것을 알지 못하며 비공식적으로 지원되는 브라우저를 지원하는 기능을 추가하여 유지 관리 구멍을 파헤칠 수있는 좋은 브라우저를 파괴하는 것처럼 보입니다. 하지만 그게 제 의견입니다. 어쨌든 다른 문제도 해결하는이 문제에 대한 해결 방법이 있습니다.

selectstart 대한 이벤트 리스너를 제거하면 contentEditable 가 Chrome에서 작동하지만 Safari에서는 작동하지 않습니다.

https://github.com/gaearon/react-dnd/commit/0a36033693868a7985ea2348105da4fb2cef8a00에 의해 수정되었습니다

selectstart에 대한 이벤트 리스너를 제거하면 contentEditable이 Chrome에서 작동하지만 여전히 Safari에서는 작동하지 않습니다.

이것은 Safari의 HTML5 드래그 앤 드롭 API 문제입니다. 우리가 할 수있는 일은 없습니다.

이 문제에 대한 수정 사항은 [email protected] 에 릴리스되었습니다.
작동하는지 확인하십시오.

Ctrl / Cmd-A가 드래그 가능한 구성 요소 내 <input> 에서 작동하는지 확인했습니다.

터치 패드 / 마우스로 입력 또는 텍스트 영역 콘텐츠를 선택하려고하면 부모 요소 끌기가 시작됩니다.

이 문제가 해결되지 않았습니다. 새 문제를 만드시겠습니까?

드래그 가능한 부모 컨테이너 내에 contentEditable이 설정된 요소는 텍스트를 선택하거나 어떤 식 으로든 상호 작용할 수 없습니다. 몇 가지 조사를 한 후 다음 버그 보고서를 찾았습니다. https://bugs.chromium.org/p/chromium/issues/detail?id=170139

이후 Chrome에서 문제를 해결 한 것으로 보입니다. 그동안 CSS로 Safari의 동작을 수정할 수 있습니다.

.contenteditable-element {
  user-select: text;
}

@trevorsmith 이것은 여전히 ​​Firefox의 동작을 수정하지 않습니다. Firefox에 대한 해결 방법을 알고 있습니까?

@ rahul1995- 방금 해결책을 찾았습니다. 드래그 가능한 DOM 노드에 참조를 저장하고 사용자가 입력 / 텍스트 영역에 집중할 때 draggable 속성을 false .

const Test = () => {
  const ref = useRef(null);
  const [focused, setFocused] = useState(false);
  const [_, drag] = useDrag({ item: { type: 'test' } });

  useEffect(() => {
    if (ref.current) {
      ref.current.setAttribute('draggable', !focused);
    }
  }, [focused]);

  return drag(
    <textarea ref={ref} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}></textarea>
  );
};

이것은 Firefox를위한 트릭을 할 것입니다 : wink :