Sounds to me like it's related to the bug I reported a few weeks ago: https://mootools.lighthouseapp.com/projects/24057/tickets/83-sortables-within-overflow-div-working-incorrectly
Appears to be a MooTools oops, with a work-around (although it's MooTools that needs fixing) on http://kasi-hamburg.de/mootools/moohelp/sortables/sortables.htm jonlb wrote: > Hi! I'm in need of a bit of assistance. I've read the docs and hunted > on Google but can't seem to find a fix for my problem.... > > Basically, I have 2 divs. The firstone is scrollabe, the second is > not. I want to drag an image from the first div to the second. If the > first divis not scrolled everything works fine. If it is scrolled it > doesn't. First, here's the code I'm using to do the Drag and Drop: > > setImages: function (container) { > //get all images in container > var images = $(container).getElements('img'); > images.each(function (image) { > > image.addEvent('mousedown', function (evt) { > > evt.stop(); > > var container = image.getParent().getParent(); > var clone = image.clone() > .setStyles(image.getCoordinates()) > .setStyles({'opacity': 0.7, 'position': > 'absolute'}) > .inject(document.body); > var drag = clone.makeDraggable({ > droppables: '.sgdSwatchDropArea', > precalculate: true, > > onDrop: function (element, droppable, event) { > //copy the element, put in the drop zone, > //then save the id > if ($defined(droppable)) { > > element.destroy(); > var id = this.getIdFromImage(image); > //get size > this.data.moveTo(this.data.findByColumn > ('id',id)); > var size = this.data.get('size'); > if (!$defined(this.size) || this.size === > size) { > if (!$defined(this.size)) { > this.size = size; > } > if (this.thumbs.indexOf(id) === -1) { > var wrapper = new Element('div', > {'class': 'sgdThumbWrapper'}); > var c = image.clone(); > c.addClass('imageThumb').inject > (wrapper); > wrapper.addEvents({ > mouseenter: > this.enterThumb.bind(this,[wrapper,c]), > mouseleave: > this.leaveThumb.bind(this,[wrapper,c]) > }); > wrapper.inject(droppable); > this.thumbs.push(id); > } > } > $(droppable).removeClass('dropTargeted'); > } else { > element.destroy(); > } > }.bind(this), > > onEnter: function (element, droppable) { > $(droppable).addClass('dropTargeted'); > }, > > onLeave: function (element, droppable) { > $(droppable).removeClass('dropTargeted'); > } > }); > > drag.start(evt); > }.bind(this)); > > }, this); > > }, > > > As you can see, I create a clone of the image as a ghost to drag. > Well, if the div is scrolled the clone ends up all the way at the top > of the page (it's getting a negative top style, usually around -90 or > so). > > Any idea why it may be doing that? > > Thanks in advance for the help! > > Jon Bomgardner
