JSFiddle - React, Tailwind, and code Playground
HTML
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat mattis ante non congue. Sed vehicula velit id elit facilisis consectetur. Sed ullamcorper accumsan ligula. Mauris vehicula nisl a ipsum tincidunt eu convallis nibh pulvinar. Nullam ornare augue a urna accumsan aliquet id a lorem. Cras nec dolor sapien. In tristique tincidunt mi, dignissim rhoncus nulla viverra a. Ut quam nunc, pellentesque nec volutpat vitae, dignissim sit amet libero. Vestibulum vitae nisi tempus dui elementum dictum.
</p>
<p>
Donec iaculis erat nec ante elementum in pulvinar magna sollicitudin. Fusce turpis orci, facilisis et laoreet non, sollicitudin vitae odio. Nunc lobortis diam ut nulla pulvinar quis egestas erat posuere. Vestibulum eu lectus lectus. Etiam tristique nibh in urna euismod sed pharetra lorem lobortis. Morbi ipsum massa, bibendum sit amet consectetur eget, venenatis vitae turpis. Donec rutrum elit nec mi congue tempor. Sed ultricies porta sollicitudin. Integer convallis dignissim arcu, ut ultricies justo molestie eu. Nam non erat vel dolor pretium rutrum. Nulla eu libero justo, et accumsan dolor. Mauris molestie leo vitae ipsum accumsan tempor.
</p>
<p>
Etiam at leo enim, ac pellentesque lectus. Donec sit amet lacus quis nisi blandit facilisis. Curabitur lorem nulla, adipiscing eget elementum sed, feugiat nec odio. Sed in ipsum ut tortor venenatis condimentum. Praesent tempus tellus vel erat viverra at aliquam erat porta. Morbi iaculis rutrum quam sit amet laoreet. Nulla neque risus, fringilla nec rhoncus tempus, mattis id nisl. Proin id justo sed est pellentesque elementum. Mauris commodo orci sagittis nunc tincidunt auctor. Aenean imperdiet nisi at lacus porttitor faucibus. Sed rhoncus dolor eget ipsum sollicitudin lobortis. Fusce nec ipsum felis.
</p>
<p>
In ut velit in augue gravida dapibus. In ullamcorper augue eu est auctor a placerat arcu tempor. Nunc eleifend, ligula non accumsan tempor, augue quam condimentum neque, eget...
JavaScript
$(document).on("mousemove", 'p', function(e) {
var $this = $(this);
if ($this.data('ignore-direction-toggle')) return;
if (e.which == 1) {
$this.data('ignore-direction-toggle', true);
$this.css({
'direction': ($this.css('direction') == 'ltr' ? 'rtl' : 'ltr')
});
}
}).on('mouseleave', 'p', function(e) {
var $this = $(this);
if ($this.data('ignore-direction-toggle')) $this.data('ignore-direction-toggle', null);
});
// comment out below if you want them to be able to select the text
$('p').attr('unselectable', 'on').css({
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'user-select': 'none',
'-ms-user-select': 'none'
}).each(function() {
this.onselectstart = function() {
return false;
};
});