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
