防止在输入之间拖放文本选择 [英] Prevent dragging and dropping text selections between inputs

问题描述

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

I have tested this in latest chrome and IE11.

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

It is possible to select a text in an input, and then drag it to another input, in at least IE11 and chrome.

我想防止这种情况.

我在示例中发现了很多示例/教程，这些示例在如何实现拖放的过程中防止出现相反的情况:允许拖动，同时防止选择文本.

I have found lots of examples/tutorials showing how to prevent the opposite in examples on how to implement drag and drop: Allowing drag, while preventing text selection.

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

But I want to allow text selection on mouse drag - but prevent the selected text to be draggable.

设置css属性-webkit-user-drag:无；还可以防止选择文本，因为我本来希望该属性:-webkit-user-select:auto;将控制防止文本选择.

Setting the css property -webkit-user-drag: none; also prevents text selection, where I would have expected that the property: -webkit-user-select: auto; would control the prevention of text selection.

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

Here is a 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的解决方案

A solution using css3 only is preferred

推荐答案

在要禁用放置文本的元素中添加ondrop="return false;".

Add ondrop="return false;" to those elements where you want to disable dropping text.

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>

这篇关于防止在输入之间拖放文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！