防止在输入之间拖放文本选择

Question

我已经在最新的 chrome 和 IE11 中对此进行了测试。

可以在输入中选择文本，然后将其拖到另一个输入中，至少在 IE11 和 chrome 中。

我想防止这种情况发生。

我发现很多示例/教程展示了如何在有关如何实现拖放的示例中防止相反的情况：允许拖动，同时防止文本选择。

但我想允许在鼠标拖动时选择文本 - 但防止所选文本可拖动。

设置 css 属性 -webkit-user-drag: none; 还可以防止文本选择，我原以为属性是：-webkit-user-select: auto; 将控制防止文本选择。

这是一个 jsfiddle：https ://jsfiddle.net/9g419erc/

input {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-user-drag: none;
}

<article>
    <input type="text" placeholder="Write text, select it, and drag">
    <input type="text" placeholder="Then drop text here">
</article>

首选仅使用 css3 的解决方案

Answer 1

添加ondrop="return false;"到要禁用放置文本的那些元素。

input {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-user-drag: none;
}

<article>
  <input type="text" placeholder="Write text, select it, and drag" >
  <input type="text" placeholder="Then drop text here" ondrop="return false;">
</article>