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)

Reply via email to