JSFiddle - React, Tailwind, and code Playground

by koodo218

HTML

<div id="GridDiv"></div>
<div class="components green">obiekt1</div>
<div class="components blue">obiekt2</div>

CSS

#GridDiv {
    width: 200px;
    height: 200px;
    background-color: #F00;
}
.components {
    width: 200px;
    height: 25px;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

JavaScript

//<![CDATA[
$(function(){

$('.components').draggable();

$( "#GridDiv" ).droppable({
    accept: ".components",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
       draggable.css({top: '0px', left: '0px'});
    }
});
});//]]>