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 cannot cancel the drag event, because it is not inside eg. span tag.
</div>

CSS

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

JavaScript

$(".draggable").draggable({cancel: ".draggable *"});