Here is waht I have so far, drag and drop with the Ghost seems to work
well accross browsers, need a little help with scrolling the window
when dragging to a drop target not in view.
window.addEvent('domready', function() {
//I don't know if this is even helping
document.ondragstart = function () { return false; }; //IE drag hack
var dropElements = $$('.drop');
var fx = [];
$$('.item').each(function(item, index){
item.addEvent('mousedown', function(e) {
e.stop();
var iLeftMargin = item.getStyle('margin-left').toInt();
var iTopMargin = item.getStyle('margin-top').toInt();
var iCoords = item.getCoordinates();
iCoords.left -= iLeftMargin;
iCoords.top -= iTopMargin;
var iPos = item.getPosition();
iPos.x -= iLeftMargin
iPos.y -= iTopMargin
var clone = this.clone();
clone.id = 'clone-' + this.id;
clone.hasBeenDragged = false;
clone.setStyles( {left: iPos.x, top:
iPos.y} );
clone.setStyles({opacity: .7, border: '1px solid red'});
clone.inject(document.body);
clone.addEvent('mouseup', function(e) {
if (!this.hasBeenDragged) clone.destroy();
});
fx[index] = {
effect: new Fx.Morph(clone, {
transition: Fx.Transitions.Quad.easeOut,
duration: 1600,
onComplete: function() {
clone.destroy();
}
}),
props: iCoords
};
var myDrag = new Drag.Move(clone, {
droppables: dropElements,
onDrop: function(el, dr) {
var currentFX = fx[index];
var fxStyles = currentFX.props;
if(dr) {
dragDropActions.push({item:el.id,
target:dr.id}) ;
tracer.set('html', dragDropActions.length + '
total drag operations performed: ' + el.id + ' dropped on ' + dr.id);
fxStyles = dr.getCoordinates();
currentFX.effect.options.duration = 120;
}
fxStyles.opacity = 0;
currentFX.effect.start(fxStyles);
},
onLeave: function(el, dr) {
},
onEnter: function(el, dr) {
dr.highlight('#fff');
},
onDrag: function(el) {
var dCoords = el.getCoordinates(window);
var wS = window.getSize();
var wSS = window.getScrollSize();
var pad = 10;
var dExtent = dCoords.bottom + pad;
if ( dExtent > (wS.y) ) window.scrollTo(0, dExtent);
}
window.scrollTo(this.mouse.now.x,
this.mouse.now.y);
},
onStart: function(el) {
el.hasBeenDragged = true;
},
onComplete: function(el) {
}
}).start(e);
});
});
});
I have played around with some stuff in the onDrag function, had
limited luck. It worked, but I would like it to work only when the
browser has scroll bars.
Any ideas? (thanks)