JSFiddle - React, Tailwind, and code Playground

by Sri Vaishnavi

HTML

<div class="dragImg"><img src="http://placehold.it/40x40"/>
             </div>


<div class="outer">Outer
    <div id="inner" align="center" > Inner</div>
             
             </div>

CSS

.outer {
    width: 400px;
    height: 300px;
    border: 1px solid black;
}
#inner {
     width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 150px auto; 
}

.ui-state-hover {
    background-color: 5px solid orange;   
}
#dropHere {
    width:400px;
    height: 400px;
    border: dotted 1px black;
    
}

JavaScript

jQuery(function() {
    jQuery(".dragImg").draggable({
   //use a helper-clone that is append to 'body' so is not 'contained' by a pane
       helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
                })
            },
           
           revert: true
	       
    });
    jQuery('.outer').droppable({
       
        accept: '.dragImg',
	    hoverClass: "ui-state-hover", 
        activeClass: 'ui-state-hover',
        
        drop: function(event, ui) {
            alert("Dropped in outer Div");
            if (!ui.draggable.hasClass("dropped")){                                       
                 jQuery(this).append(
                     jQuery(ui.draggable).clone()
                     .addClass("dropped")
                     .draggable()); 
                   }
             } 
      });

    jQuery('#inner').droppable({
       
        accept: '.dragImg',
         activeClass: 'ui-state-hover',
         hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            alert("Inner Dropped");
            if (!ui.draggable.hasClass("dropped")){                                       
                 jQuery(this).append(
                     jQuery(ui.draggable).clone()
                     .addClass("dropped").draggable()); 
                   }
             } 
            
        });
   
    
    
    
    
  });