JSFiddle - React, Tailwind, and code Playground

drag drop2

by Dave

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="obj_mainback" style="background:blue;">

<div class="obj_midback_btn001 obj_midback" style="width: 100px;height: 25px;">
<div class="obj_blindback"></div>
<button class="obj_btn001">zgdfg</button>
</div>
<!-- -->
<!--give every div an id when created-->
<!-- -->
<div class="obj_midback_div001 obj_midback" style="width: 100px;height: 100px;">
<div class="obj_blindback"></div>
<div class="obj_div001" style="background:red"></div>
</div>
<br><br><br><br><br><br><br><button id="btn">Edit</button>
</div>

CSS

.obj_mainback {
   min-width:100%;
   min-height:100%; 

position:absolute;
   margin: 0px;
   padding: 0px;
    
}

.obj_midback { 
   position:absolute;
}
.obj_btn001{
   min-width:100%;
   min-height:100%; 
   text-align: center; 
   margin: 0;
}
.obj_midback_btn001 { 
   min-width:20px;
   min-height:20px; 
}
.obj_div001{
   min-width:100%;
   min-height:100%; 
   text-align: center; 
   margin: 0;
}
.obj_midback_div001 { 
   min-width:20px;
   min-height:20px; 
}
.obj_blindback {
    position:absolute;
    top:0px;
    left:0px;
    background:black;
    opacity:.10;
   min-width:100%;
   min-height:100%; 
    margin: 0;
    display:none;
}

JavaScript

$('button#btn').text('Edit');
$('#btn').click(function(){

if ($(this).text() == "Edit") {
$(".obj_midback").hover(function(){
$(this).children('.obj_blindback').toggle()
$(this).resizable( { disabled: false } );
$(this).draggable( { disabled: false } );
}).mouseleave(function(){
$( ".obj_midback" ).resizable( { disabled: true } );
$('.obj_mainback').draggable( { disabled: true } );
});
$('button#btn').text('Display')
}else {
$(".obj_midback").unbind('mouseenter mouseleave');
$( ".obj_midback" ).resizable( { disabled: true } );
$('.obj_midback').draggable( { disabled: true } );

$('button#btn').text('Edit')
}
});