By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,385 Members | 1,767 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,385 IT Pros & Developers. It's quick & easy.

scrollable div when dragging

100+
P: 178
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.
Jul 17 '08 #1
Share this Question
Share on Google+
4 Replies


hsriat
Expert 100+
P: 1,654
If you drag something out if the window, the window automatically scrolls to that side. What exactly are you trying to achieve?
Jul 17 '08 #2

rnd me
Expert 100+
P: 427
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)
Jul 17 '08 #3

100+
P: 178
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?
Jul 17 '08 #4

100+
P: 178
heres the drag drop code im using

Expand|Select|Wrap|Line Numbers
  1. var mousex = 0;
  2. var mousey = 0;
  3. var grabx = 0;
  4. var graby = 0;
  5. var orix = 0;
  6. var oriy = 0;
  7. var elex = 0;
  8. var eley = 0;
  9. var algor = 0;
  10.  
  11. var dragobj = null;
  12.  
  13. function falsefunc() { return false; } // used to block cascading events
  14.  
  15. function init()
  16. {
  17.   document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  18.   update();
  19. }
  20.  
  21. function getMouseXY(e) // works on IE6,FF,Moz,Opera7
  22.   if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
  23.  
  24.   if (e)
  25.   { 
  26.     if (e.pageX || e.pageY)
  27.     { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
  28.       mousex = e.pageX;
  29.       mousey = e.pageY;
  30.       algor = '[e.pageX]';
  31.       if (e.clientX || e.clientY) algor += ' [e.clientX] '
  32.     }
  33.     else if (e.clientX || e.clientY)
  34.     { // works on IE6,FF,Moz,Opera7
  35.       mousex = e.clientX + document.body.scrollLeft;
  36.       mousey = e.clientY + document.body.scrollTop;
  37.       algor = '[e.clientX]';
  38.       if (e.pageX || e.pageY) algor += ' [e.pageX] '
  39.     }  
  40.   }
  41. }
  42.  
  43. function update(e)
  44. {
  45.   getMouseXY(e); // NS is passing (event), while IE is passing (null)
  46.  
  47.   document.getElementById('xpos').value = elex;
  48.   document.getElementById('ypos').value = eley;
  49.   document.getElementById('object').value = ss;
  50. }
  51.  
  52. function grab(context, mod_name)
  53. {
  54.   document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  55.   dragobj = context;
  56.   ss = context.Class;
  57.   dragobj.style.zIndex = 10; // move it to the top
  58.   document.onmousemove = drag;
  59.   document.onmouseup = drop;
  60.   grabx = mousex;
  61.   graby = mousey;
  62.   elex = orix = dragobj.offsetLeft;
  63.   eley = oriy = dragobj.offsetTop;
  64.   update();
  65. }
  66.  
  67. function drag(e) // parameter passing is important for NS family 
  68. {
  69.   if (dragobj)
  70.   {
  71.     elex = orix + (mousex-grabx);
  72.     eley = oriy + (mousey-graby);
  73.     dragobj.style.position = "absolute";
  74.     dragobj.style.left = (elex).toString(10) + 'px';
  75.     dragobj.style.top  = (eley).toString(10) + 'px';
  76.   }
  77.   update(e);
  78.   return false; // in IE this prevents cascading of events, thus text selection is disabled
  79. }
  80.  
  81. function drop()
  82. {
  83.   if (dragobj)
  84.   {
  85.     dragobj.style.zIndex = 0;
  86.     dragobj = null;
  87.   }
  88.   update();
  89.   document.onmousemove = update;
  90.   document.onmouseup = null;
  91.   document.onmousedown = null;   // re-enables text selection on NS
  92. }
  93.  
Jul 17 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.