JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div class="outer">
    <div class="inner">
    
    </div>
</div>

CSS

.outer
{
    border: 1px solid red;
    width: 100px;
    height: 100px;
}

.inner
{
    border: 1px solid blue;
    width: 50px;
    height: 50px;
}

JavaScript

var outer = $(".outer");
var inner = $(".inner");
outer.draggable({
    cancel: ".inner"
});
inner.draggable();

inner.on( "dragstop", function( event ) {
    event.stopPropagation();
});

outer.on("dragstart", function() {
    console.log("dragstart!");
});
outer.on("drag", function() {
    console.log("drag!");
});
outer.on("dragstop", function() {
    console.log("dragstop!");
});