hi guys ,

i'm trying to drag and drop div into canvas , but when i add to div css 'overflow:scroll' it drop stop working

css:
HTML Code:
div.table {border: 0px solid gold;   height:300px; overflow:scroll; }
div.tr {border: 0px solid gold; display: table-row; }
div.td {border: 1px solid gold; display: table-cell; }
HTML Code:
<div class="table">
  <div class="tr" id="tr1">
    <div class="td"><div id="item_1"><img src="images.gif" height="28" /></div></div>    
  </div>
  <div class="tr" id="tr2">
    <div class="td"><div id="item_2"><img src="images.gif" height="28" /></div></div>    
  </div>
  <div class="tr" id="tr3">
    <div class="td"><div id="item_3"><img src="images.gif" height="28" /></div></div>    
  </div>
 <div class="tr" id="tr4">
    <div class="td"><div id="item_4"><img src="images.gif" height="28" /></div></div>    
  </div>
 <div class="tr" id="tr5">
    <div class="td"><div id="item_5"><img src="images.gif" height="28" /></div></div>    
  </div>
  </div>
 
 
 <canvas id="canvas" width=300 height=300>	</canvas>
js :
Code:
$('div[id^="item_"]').draggable({
	containment: '#canvas',
	//appendTo:  'body',
	helper: 'clone',
	revert: 'invalid'
});	

canvas.droppable({
	//accept: 'div[id^="item_"]',
	 greedy: true,   
	drop: function(event, ui) {
        }
});
so how i can drag items and drop into canvas please

regards