Draggables inside a droppable parent with overflow: scroll

[Yuri Leikind]

Hello all,

I am stuck here with a problem.

There's a scrollable div on a page (overflow-y: scroll) with
draggables inside, I will call them draggables type A for the sake of
simplicity. There's a droppable area for draggables of type A.
Dragging these from inside the scrollable area works perfectly well,
and they are visible.

There are also draggables of type B in another div, and I need to
enable dropping them to the same scrollable div which contains
draggables of type A. I declare this scrollable div as a droppable for
draggables of type B, and I can drag & drop them, no problem here.
But! As soon as this div is declared as a droppable area, dragging of
draggables of type A changes - they are not visible when they are
outside of their scrollable parent div, though they can be dropped.

Setting overflow to 'none' fixes the issue, but I need that scrolling.

I've been googling, but to no avail.

I tried

starteffect: function(e){
e.setStyle({'position':'absolute', 'z-index': 1001});
}

but it doesn't change anything.

What am I missing? I would appreciate any hints.

I am using Prototype 1.6.1, scriptaculous 1.8.3, testing it in Safari
5.0 and Firefox 3.6.6

Best regards,
Yuri Leikind

[Benjamin Smith]

I've seen similar problems when using scrollable divs and the drag/drop features of Scriptaculous. It seems to be caused by the fact that Scriptaculous's drag/drop features don't account for the scrolling of intermediate widgets between an element's real position on the screen and its position relative to the document.

It's discussed here a bit: https://prototype.lighthouseapp.com/projects/8887/tickets/122-scrollbar-causes-drag-drop-to-fail#ticket-122-6

After spending some time trying to figure out where to fix this issue, I ended up writing a couple of hackish scripts to find the REAL scrolling x/y coordinates, even when nesting scrolling divs as follows:

function getTotalScrollLeft(n)
  {
  var ret = 0;
  if (n.parentNode)
    ret = getTotalScrollLeft(n.parentNode);
  if (n.scrollLeft)
    ret = ret + n.scrollLeft;
  return ret;
  }

function getTotalScrollTop(n)
  {
  var ret = 0;
  if (n.parentNode)
    ret = getTotalScrollTop(n.parentNode);
  if (n.scrollTop)
    ret = ret + n.scrollTop;
  return ret;
  }

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.