DRAGGABLE - SCROLL DIV

by bizamajig

HTML

<script src="http://www.nerdydork.com/demos/dragscroll/jquery.aautoscroll.2.4.js"></script>
<div id='drag_container'>
    <div class='draggable' data-number='1'></div>
    <div class='draggable' data-number='2'></div>
    <div class='draggable' data-number='3'></div>
    <div class='draggable' data-number='4'></div>
    <div class='draggable' data-number='5'></div>
</div>  

<div id="drop_container">
    <div class="drop_target" data-number='1'></div>
    <div class="drop_target" data-number='2'></div>
    <div class="drop_target" data-number='3'></div> 
    <div class="drop_target" data-number='4'></div>
    <div class="drop_target" data-number='5'></div>
</div>

CSS

#drag_container {
   width:300px; 
   height:80px;
   border:1px solid #c9c9bf;
   margin-bottom:10px;
}

.draggable {
   width:50px; 
   height:50px;
   display:inline-block;
   cursor:move;
   background: green;
}

#drop_container {
   width:200px; 
   height:80px;
   overflow-x:scroll;
   border:1px solid #c9c9bf;
   white-space:nowrap
}

.drop_target {
   width:50px; 
   height:50px;
   border:1px solid #c9c9bf;
   display:inline-block;
}

JavaScript

$('.draggable').draggable({
    stack: '#draggables div',
    revert: true
});

$('.drop_target').droppable({
	accept: '.draggable',
	drop: handleDrop
});


function handleDrop(event, ui) { 
   
    ui.draggable.css('cursor', 'pointer');
//alert('ffsdfds');
	var slot_number = $(this).data('number');
                            
	var draggable_number = ui.draggable.data('number');
	if (slot_number == draggable_number) {
    
		ui.draggable.draggable('disable');
		$(this).droppable('disable');
//		ui.draggable.position({ of: $(this), my: 'left top', at: 'left top'});
    	$(this).append(ui.draggable);
    	$(ui.draggable).css("position","relative");
    	$(ui.draggable).css("top","0px");
    	$(ui.draggable).css("left","0px");   
		ui.draggable.draggable('option', 'revert', false);
	}
}