JSFiddle - React, Tailwind, and code Playground

by Klaus Kater

HTML

<body>
    <div class="target"></div>
<div id="container1" class="drag"></div>

</body>

CSS

#obj1, #obj2, #objstart, #container, #container1{
		height: 100px;
		width: 100px;
        position: absolute;
	}
.target{
    height: 20px;
	width: 20px;
    background-color: #dadada;
    position: absolute;
    left: 120px;
    top: 120px;
}

	#container{background-color: #dddddd}
	#container1{background-color: green}

.hover{
    border: solid 3px black;
}

JavaScript

$( ".drag" ).draggable({ 
    stack: "body div",
    opacity: 0.1, 

})
// $(this).append($(ui.helper).clone());
$( ".target" ).droppable({
    hoverClass: "hover",
    containment: 'parent',
    drop: function( event, ui ) {
        $(this.parent).append( event.toElement );
        console.log(' drop objstart');
        // console.log(event);
        // console.log(ui);
    }
});