React-dnd: 可拖动组件内部的输入和文本区域问题

这是由于selectstart事件的注册引起的，显然只有IE兼容性才需要此事件。
如果像我一样，您不需要IE兼容性，这是我的快速修复，可能对您有用：
https://github.com/dperetti/react-dnd/commit/06f74ef97e07a9a24c10eab8593f3e2121d4f2ed

感谢您的举报！ 我很高兴接受对此进行修复的公关。

我有两个要求：

• 它仍然需要修复该IE。
• 请确认其他浏览器是否需要preventDefault() 。 我认为这会阻止您尝试拖动的文本的选择。 如果确实有助于防止在其他浏览器中进行不必要的选择，则您可能希望在e.preventDefault()周围加上一些检查，例如e.target.tagName !== 'input' （但更聪明）。

与<div contentEditable={isEditing} />相同的错误。
我也无法编辑它。 Ctrl+A和Shift + Arrows不起作用。

在接下来的三个星期中，我将变得很忙，没有时间解决此问题。
正如我所说，我很高兴接受具有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设置简单测试用例的方法。

我认为sortable-simple示例在IE9上无法修复＃128。

@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 :

Chrome似乎已经解决了该问题。 同时可以使用CSS修复Safari的行为：

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

@trevorsmith这仍然不能解决Firefox的行为。 您知道Firefox有什么解决方法吗？

@ rahul1995-我刚刚找到了一个解决方案：只需将引用存储到可拖动的DOM节点，当用户将输入/文本区域作为焦点时，将可拖动属性设置为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的问题：