drag_object = element;design_f //get window size $scroll_bars = getScrollBarDimensions( ); $max_x = document.documentElement.clientWidth - $scroll_bars.vertical - $circle_width; $max_y = document.documentElement.clientHeight - $scroll_bars.horizontal - $circle_height; //check bounds if( $x < 0 ) { $x = -$x; $dx = getRndVel(); } else if( $x > $max_x ) { $x -= ($x-$max_x); $dx = getRndVel(); $dx *= -1; } if( $y < 0 ) { $y = -$y; $dy = getRndVel(); } else if( $y > $max_y ) { $y -= ($y-$max_y); $dy = getRndVel(); $dy *= -1; } //update object $circle.style.top = $y+"px"; $circle.style.left = $x+"px"; } } function getRndVel() { return getRnd($max_vel-$min_vel)+$min_vel; } function getRnd(max_val) { $rnd = Math.random( ); return Math.round( $rnd * max_val ); } function getScrollBarDimensions(){ var elm = document.documentElement.offsetHeight ? document.documentElement : document.body, curX = elm.clientWidth, curY = elm.clientHeight, hasScrollX = elm.scrollWidth > curX, hasScrollY = elm.scrollHeight > curY, prev = elm.style.overflow, r = { vertical: 0, horizontal: 0 }; if( !hasScrollY && !hasScrollX ) { return r; } elm.style.overflow = "hidden"; if( hasScrollY ) { r.vertical = elm.clientWidth - curX; } if( hasScrollX ) { r.horizontal = elm.clientHeight - curY; } elm.style.overflow = prev; return r; } function dragInit(){ document.onmousemove = drag; document.onmouseup = dragStop; } function drag(event){ $pos_x = document.all ? window.event.clientX : event.pageX; $pos_y = document.all ? window.event.clientY : event.pageY; if(drag_object != null){ drag_object.style.left = ($pos_x - $drag_x) + "px"; drag_object.style.top = ($pos_y - $drag_y) + "px"; } } function dragStop(){ if( !$link_set ) { $cont_html = document.getElementById('circle_container').innerHTML; document.getElementById('circle_container').innerHTML = ""+$cont_html+""; $link_set = 1; document.getElementById('circle').onmousedown = function(){ $do_move = 0; dragStart(this); } } drag_object = null; } function dragStart(element){