一次只允许从一个 div 中选择文本

Question

我有两个具有“col-lg-6”（引导程序）类的 DIV，这使它们并排放置。我要做的是只允许用户一次从这些 DIV 之一中选择文本。如果他尝试同时从两个 DIV 中选择文本，则会显示错误。

小提琴：

http://jsfiddle.net/vm7psdt2/

<div class="container">
    <div class="col-lg-6">
        First Paragraph
    </div>
    <br><br>
    <div class="col-lg-6">
       Second Paragraph
    </div>
</div>

用户一次只能选择“第一段”或“第二段”。不是来自两者的文本（例如：“First Paragraph Second”）。

我希望使用 javascript 或 Jquery 完成此操作。谢谢

Answer 1

这是一个工作演示 http://jsfiddle.net/zj5tdpwy/

你可以调整的小事情是你需要点击 div 然后选择。

在 SO 中没有直接的解决方案，但有提示：（希望这篇文章能用 CSS 解决 Jquery 方式）

• Is there a way to make a DIV unselectable?
• How to allow text-selection of a DIV, but prevent the text-selection of the father DIV?

API：

• .siblings - http://api.jquery.com/siblings/

玩一玩会有所帮助:)

Jquery 代码

 $(document).on('click','div',function() { 
        $(this).removeClass('unselectable').siblings().addClass('unselectable');
 });

CSS

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

*.unselectable * {
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;
}