scrollable div when dragging

[cleary1981]

Does anyone know of a good tutorial or can point me in the right direction in relation to this problem?

I have a div with objects inside it that can be dragged and dropped. I want to set the properties of the div so when I drag an object to the right side edge the window will scroll right.

[hsriat]

If you drag something out if the window, the window automatically scrolls to that side. What exactly are you trying to achieve?

[rnd me]

you will have to check to location in the drag and drop mouseup routine and either
scroll the window, or push the dragger tag back to say, screen.availWidth - parseInt(elm.style.width)

[cleary1981]

the window does scroll automatically but only a little. The object being dragged goes out of view and you have to scroll over and pick he object up again. I want the div to keep the object in view and keep scrolling until I drop the object. Does that make sense?

[cleary1981]

heres the drag drop code im using

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
 
var dragobj = null;
 
function falsefunc() { return false; } // used to block cascading events
 
function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}
 
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
 
  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}
 
function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)
 
  document.getElementById('xpos').value = elex;
  document.getElementById('ypos').value = eley;
  document.getElementById('object').value = ss;
}
 
function grab(context, mod_name)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  ss = context.Class;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}
 
function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}
 
function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}