Ограничить выбор пользователя до узла, не делая его редактируемым?

Question

У меня есть следующая страница:

<div class="a"> 
    ... 
</div> 
<div class="b"> 
    ... 
</div> 

Мои пользователи взаимодействуют с этой страницы, выбирая различные части текста в .a и .b. Собственный подход к настройке браузера почти работает, но мне нужно, чтобы мои пользователи не делали выборы, которые охватывают границу между .a и .b.

Есть ли способ ограничить выбор пользователя до <div>?

К сожалению, это содержание не пользователя редактируемого - что прискорбно, потому что установка contenteditable="true" на каждый <div> достигает ограничения я ищу.

Answer 1

Как насчет начиная с этого:

HTML:

<div class = "a"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo. 
</div> 
<div class = "b"> 
    Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus. 
</div> 

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

.noSelection { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

div + div { 
    padding-top: 10px; 
} 

JQuery:

$(function() { 
    $("div").hover(function() { 
     $(this).siblings("div").toggleClass("noSelection");  
    }); 
}); 

Вот скрипку: http://jsfiddle.net/J2fJz/.