Here it is... of course you'll need to adjust for your situation but
you should get the basic idea. The key was in the mousedown event
handler.
Good luck!
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 co = image.getCoordinates();
var scroll = document.id(document.body).getElement
('.sgdSwatchLibrary').getParent().getScroll();
co.top += scroll.y;
var clone = image.clone()
.setStyles(co)
.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;
this.text.setStyle
('display','none');
}
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);
},
On Aug 5, 10:12 am, Martin <[email protected]> wrote:
> 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
