ถาม jQuery Drag & Drop หน่อยครับ กำหนดจำนวนที่ลากเข้ามา

<ul id="list2">
		<li><div>10</div></li>
		<li><div>11</div></li>
		<li><div>12</div></li>
		<li><div>13</div></li>
		<li><div>14</div></li>
		<li><div>15</div></li>
		<li><div>16</div></li>
		<li><div>17</div></li>
		<li><div>18</div></li>
	</ul>
	
	<ul id="list1">
		<li><div>1</div></li>
		<li><div>2</div></li>
		<li><div>3</div></li>
		<li><div>4</div></li>
		<li><div>5</div></li>
		<li><div>6</div></li>
		<li><div>7</div></li>
		<li><div>8</div></li>
		<li><div>9</div></li>
	</ul>
	
	<input name="list1SortOrder" type="hidden" />

	<script type="text/javascript">
		$("#list1, #list2").dragsort({ 
                    drop: function(event,ui){
                        var $this = $(this);

                        if($this.find('#list1 div').length >= 10){
                            // Cancel drag operation (make it always revert)
                            ui.draggable.draggable('option','revert',true);
                            return;
                        }

                        ui.draggable.appendTo($this).css({
                            top: '0px',
                            left: '0px'
                        });

                        $('#list2').each(function(){
                            var $this = $(this);
                            $this.next('#list1 div').html($this.find('#list1 div').length);
                        });
                    },
                    dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
                
		function saveOrder() {
			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
	</script>