DND - FORCE SCROLL - #4

by bizamajig

HTML

<div style="width: 50%; height: 100px; overflow-x: scroll;">
  
  <div id="my-div1" class="my-div-class" style="float: left;">
    <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>
  <div id="my-div2" class="my-div-class" style="float: left;">
    <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>
    <p class="para-item"> para 213 </p>
    <p class="para-item"> para 214 </p>
    <p class="para-item"> para 215 </p>
    <p class="para-item"> para 216 </p>
    <p class="para-item"> para 217 </p>
    <p class="para-item"> para 218 </p>
    <p class="para-item"> para 219 </p>
    <p class="para-item"> para 220 </p>
  </div>
  <div id="my-div3" class="my-div-class" style="float: left;">
    <p class="para-item"> para 301 </p>
    <p class="para-item"> para 302 </p>
    <p class="para-item"> para 303 </p>
    <p...

CSS

.my-div-class {
  margin: 0;
  padding: 0;
  width: 200px;
  height: 100px;
  float: left;
  overflow: auto;
}
.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 );