SORTABLE - SCROLL FIX - BIZ USAGE

by bizamajig

HTML

<body>
	    <table class="my-table">
	    <tbody>
	        <tr>
	            <td class="my-column" >
		            <div id="my-div1" class="my-div-class">
		                <p class="para-item"> para 101 </p>
		                <p class="para-item"> para 102 </p>
		                <p class="para-item"> para 103 </p>
		                <p class="para-item"> para 104 </p>
		                <p class="para-item"> para 105 </p>
		                <p class="para-item"> para 106 </p>
		                <p class="para-item"> para 107 </p>
		                <p class="para-item"> para 108 </p>
		                <p class="para-item"> para 109 </p>
		                <p class="para-item"> para 110 </p>
		                <p class="para-item"> para 111 </p>
		                <p class="para-item"> para 112 </p>
		                <p class="para-item"> para 113 </p>
		                <p class="para-item"> para 114 </p>
		                <p class="para-item"> para 115 </p>
		                <p class="para-item"> para 116 </p>
		                <p class="para-item"> para 117 </p>
		                <p class="para-item"> para 118 </p>
		                <p class="para-item"> para 119 </p>
		                <p class="para-item"> para 120 </p>
		            </div>
		        </td>
		        <td>
		            <div id="my-div2" class="my-div-class">
		                <p class="para-item"> para 201 </p>
		                <p class="para-item"> para 202 </p>
		                <p class="para-item"> para 203 </p>
		                <p class="para-item"> para 204 </p>
		                <p class="para-item"> para 205 </p>
		                <p class="para-item"> para 206 </p>
		                <p class="para-item"> para 207 </p>
		                <p class="para-item"> para 208 </p>
		                <p class="para-item"> para 209 </p>
		                <p class="para-item"> para 210 </p>
		                <p class="para-item"> para 211 </p>
		                <p class="para-item"> para 212 </p>
		      ...

CSS

body {
	    		text-align: center;
	    		
	    	}
	        p.ui-sortable-helper {
	            color: red;
	        }
	        .para-item {
	            border: 1px solid blue;
                cursor: move;
	        }
	        p.pending {
                filter: alpha(opacity = 50);
                opacity: .5;
                cursor: auto;
	        }
	        
	        .my-table {
	            border: 2px solid green;
	            margin:  auto;
	        }
	        .my-div-class {
	            //float: left;
	            height: 400px;
	            overflow: scroll;
	            padding: 3px 3px;
	            margin: 3px 3px;
	        }
			.highlight {
			    border: 1px solid #858585;
			    border-style: dashed;
			    background-color: #E6E6E6;
			}

JavaScript

var scrollingSensitivity = 20, scrollingSpeed = 60;	
var configuration = {
							cursor: 'move',
							scrollSpeed: scrollingSpeed,
							containment : '.my-table',
							placeholder: 'highlight',
							dropOnEmpty: true,
    scrollSensitivity:scrollingSensitivity,
							tolerance: "pointer",
							forcePlaceholderSize: true,
							connectWith: '.my-div-class',
                            scroll: false,
        sort:function(event,uiHash){
         
        var scrollContainer = uiHash.placeholder[0].parentNode;
            var overflowOffset = $(scrollContainer).offset();
if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
    scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed;
        } 
        else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
            scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed;
        }
/*
			if((overflowOffset.left + scrollContainer.offsetWidth) - event.pageX < scrollingSensitivity) {
    scrollContainer.scrollLeft = scrollContainer.scrollLeft + scrollingSpeed;
        } 
        else if(event.pageX - overflowOffset.left < scrollingSensitivity) {
            scrollContainer.scrollLeft = scrollContainer.scrollLeft - scrollingSpeed;
      
    }
*/
		}				};
	    $(".my-div-class").sortable( configuration );