JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<div class="dgdp">
<div class="dropArea">
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>
<div class="vdrop"> </div>

</div>

<div class="dragArea">
<div class="vdrag ha" id="vdg1"> one1 </div> 
<div class="vdrag  ha hidden" id="vdg2"> one2 </div> 
<div class="vdrag ha hidden" id="vdg3"> one3 </div> 
<div class="vdrag  ha hidden" id="vdg4"> one4 </div> 
<div class="vdrag  ha hidden" id="vdg5"> one5 </div> 
<div class="vdrag  ha hidden" id="vdg6"> one6 </div> 
<div class="vdrag  ha hidden" id="vdg7"> one7 </div> 
<div class="vdrag ha  hidden" id="vdg8"> one8 </div> 
<div class="vdrag ha  hidden" id="vdg9"> one9 </div> 
<!--<div class="vd2"><div class="vdrag" id="vdg2"> two </div> </div>
<div class="vd3"><div class="vdrag" id="vdg3"> three </div></div>
<div class="vd4"><div class="vdrag" id="vdg4"> four </div> </div>
-->
</div>
</div>	
<div class="submit btn next" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 100px">next</div>
<div class="submit btn prev" style=" width:100px; height:40px; border:1px solid;position:absolute; margin:300px 0 0 200px"> prev</div>

CSS

#page1{
border:1px solid orange;
height:380px;
width:640px;
margin:20px auto;
}
.dragArea{
height:30px;
width:150px;
border: 1px solid ;
 overflow:hidden;   

float:left;
}
.dropArea{
height:300px;
width:150px;
border: 1px solid red;
float:right;
}

.vdrag{
background:#FF9999;
height:30px;
width:100px;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor:pointer;
}
.vd1,.vd2,.vd3,.vd4
{
margin:10px;
border:1px solid;
height:40px; width:150px;
}
.vdrop{
border:1px solid #e4e4e4;
height:30px;
width:100px;
margin:10px;
}
.dgdp{  border: 1px solid;
    height: 410px;
    position: absolute;
    width: 540px;}







.hidden{
display:none;
}

JavaScript

$(document).ready(function(){
				  

dragDiv();
						  });
function dragDiv(){
	
var t=setTimeout(function(){$('.vdrag').draggable({revert:true,containment:'.dgdp' });	 },1000)



var t=setTimeout(function(){
												  
												  
$('.vdrop').each(function(){ 
$(this).droppable({ 
				  
				  
drop:function(event,ui){
var vdragId = $(ui.draggable).attr('id');
$(this).removeClass("ha");
$('.dragArea').hide();
$('#'+vdragId).css({'top':'0px','left':'0px','z-index':'0' });
$(this).html(ui.draggable);	
$('.btn').click();
 $('.dragArea').delay(1000).fadeIn('slow');
}  
						   
						   
});						    
						  
						  
});

  },2000)

}


 var $box;
var $btn;
 var active = 0;
$('.btn').live('click',function() {
    $btn = $(this);
    $box = $('.dragArea').find('.ha'); 
	
    $box.eq(active).slideUp(function() {
        if ($btn.hasClass('next')) {
            if (active == $box.length - 1) {
                active = 0;
            }
            else {
                active ++;
            }
        }
        else {
            if (active == 0) {
                active = $box.length - 1;
            }
            else {
                active --;
            }
        } 
        $box.eq(active).delay(0).slideDown();
    });

});