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

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>