Hi Jon, Would you mind posting the working code as I'm having a similiar problem...
Thanks /Martin On 2 Aug, 22:48, Jon Bomgardner <[email protected]> wrote: > 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
