Thanks for the help but I found my problem. I needed to take into account the scroll when I setup the clone. I just used .getCoordinates () on the image to position the clone but I needed to check the scroll of the parent and adjusted the .top style accordingly.
It works now. Thanks, Jon Bomgardner On Aug 2, 12:43 am, Ralph Slooten <[email protected]> wrote: > Sounds to me like it's related to the bug I reported a few weeks > ago:https://mootools.lighthouseapp.com/projects/24057/tickets/83-sortable... > > Appears to be a MooTools oops, with a work-around (although it's > MooTools that needs fixing) > onhttp://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
