JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
	<p>This textnode is inside p, so it can be selected.</p>
	<span>This textnode is inside span so it can be selected.</span>
	<br>
	<br>
	<div>
		<div>This textnode is nested inside div which is inside div, so it can be selected.</div>
	</div>
	<br> This textnode is originally plain textnode, but we use javascript to wrap it inside tag to allow it to cancel the drag event.
</div>

CSS

.draggable{
    padding: 10px;
    text-align:left;
    background-color:#FFAAAA;
    border: 1px solid red;
    height: 230px;
    width:300px;
    display: inline-block;
}
p, span{
    background-color:#AAFFAA;
    border: 1px solid green; 
}
body{
    text-align:center;
}

JavaScript

$(".draggable").draggable({cancel:'.draggable *'})
.contents().filter(function() {return this.nodeType == Node.TEXT_NODE;})
.wrap('<custom></custom>');