Next prev with Drag and drop

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>



JS


$(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();
    });

});





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;
}



ViewDomo