JSFiddle - React, Tailwind, and code Playground

by Salustiano Silva

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css">
<div id="ParentDIV">
    <div class="dragClass">
        <p>Drag me around!</p>
    </div>
</div>

CSS

#ParentDIV {
    width: 500px;
    height: 200px;
    margin: 20px auto;
    background: lightgray;
    position: relative;
}
.dragClass {
    font-family: Tahoma, sans;
    color: black;
    background: orange;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
    padding: 6px;
}
p {
    margin: 0; padding: 0;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

JavaScript

$(".dragClass")
    .draggable({
        cursor      : "move",
        delay       : 100,
        scroll      : false,
        containment : "parent"
    })
    .resizable({
        containment : "parent"
    });