Drag and Drop and auto scroll

by Joshy Francis

HTML

<div id="info" style="background-color:yellow;width:auto;height:60px;position:absolute;right:1px;top:1px;" ></div>
	<div id="div1" style="position:absolute;left:100px;top:150px;background-color:gray;width:400px;height:400px;overflow:auto;">

		 <div id="divc1" style="position:absolute;left:100px;top:100px;background-color:green;width:400px;height:400px;overflow:auto;">


				 <div id="Div1" style="position:absolute;left:800px;top:800px;border:1px solid black;width:100px;height:100px;">
					Test
				</div> 
    <div id="drop1" style="position:absolute;left:500px;top:100px;border:1px solid black;width:100px;height:100px;">
        drop here
    </div>
    <div id="drop2" style="position:absolute;left:500px;top:300px;border:1px solid black;width:100px;height:100px;">
        drop here
    </div>       
 
			<div id="divr1" style="position:absolute;left:50px;top:50px;background-color:green;width:100px;height:100px;border:1px solid yellow;">
				resize me

			</div>
				 <div id="drag1" style="position:absolute;left:100px;top:100px;border:1px solid black;background-color:yellow;">
					Drag me
				</div> 
		</div>
	  
	</div>	
 			<div id="Div2" style="position:absolute;left:100px;top:100px;border:1px solid black;background-color:green;width:150px;height:100px;">
 				 <div id="drag2" style="position:absolute;left:20px;top:20px;border:1px solid black;background-color:yellow;">
					Drag Handle
				</div> 
            </div> 
            
    <div id="d1" style="position:absolute;left:1200px;top:800px;border:1px solid black;width:100px;height:100px;background-color:blue;">
        Move with
    </div>    

 			<div id="Div3" style="vertical-align:center;position:absolute;left:300px;top:100px;border:1px solid black;background-color:green;width:150px;height:100px;">
				<center>
				<a href="javascript:alert('ok 1')" >Link </a>
				</center>
				<span onclick="alert('ok 2');">Span</span>
            </div>

JavaScript

function drag_auto_scroll(el_drg) {
        //Thanks to StackOverFlow
        //Thanks to Peter-Paul Koch for Some of his concepts borrowed from http://www.quirksmode.org/js/dragdrop.html
            this.addEventSimple = function (obj, evt, fn) {
                if (obj.addEventListener)
                    obj.addEventListener(evt, fn, false);
                else if (obj.attachEvent)
                    obj.attachEvent('on' + evt, fn);
            };
            this.removeEventSimple = function (obj, evt, fn) {
                if (obj.removeEventListener)
                    obj.removeEventListener(evt, fn, false);
                else if (obj.detachEvent)
                    obj.detachEvent('on' + evt, fn);
            };
            this.fade = function (el_f, o) {
                var oo = o / 100;
                el_f.style.opacity = oo;
                el_f.style['-ms-filter'] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + o + ")";
                el_f.style['-khtml-opacity'] = oo;
                el_f.style['-moz-opacity'] = oo;
                el_f.style.filter = "Alpha(Opacity=" + o + "); -moz-opacity:" + oo + "; opacity:" + oo + ";-khtml-opacity:" + oo + ";";
                if (o >= 100) {
                    el_f.style.filter = '';
                }
            };
            this.intersectRect = function (r1, r2) {
                return !(r2.left > r1.right ||
               r2.right < r1.left ||
               r2.top > r1.bottom ||
               r2.bottom < r1.top);
            };  
            this.getposition=function(el){
				var rect = el.getBoundingClientRect(),
                scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
                scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				var l, t, w, h, sw, sh, sbw, sbh;
                if (el == document.body) {
                    l = 0;
                    t = 0;
             ...