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

【问题标题】：Prevent dragging and dropping text selections between inputs防止在输入之间拖放文本选择
【发布时间】：2017-09-06 09:41:15
【问题描述】：

我已经在最新的 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 的解决方案

【问题讨论】：

检查我的答案。希望它可以帮助你。如果您觉得它合适，请接受它作为答案。谢谢
只使用 css3 的解决方案是首选，但感谢它是我没有想到的智能解决方案。
'将看看我是否可以使用 css3 找到任何解决方案

标签： html css

【解决方案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>

【讨论】：