click 'n' draw

Hrm, jeg er sikker på at jeg harhevet den fra et Eksperten-spørgsmål, men jg har ikke linket, så du får -maddog-s dragmanager in extenso:

Jeg har udviklet følgende dragmanager til IE og NS/Moz. Den kan kalde funktioner ved drags og låse i horisontal og vertikal retning samt sætte bounds så der kun kan dragges indenfor et afgrænset område.

if  (window.Node) {
    // Først extender vi Moz/NS så vi undgår codebranching
    Event.prototype.__defineGetter__("clientX", function() { return this.pageX; } );
    Event.prototype.__defineGetter__("clientY", function() { return this.pageY; } );
    Event.prototype.__defineGetter__("offsetX", function () { return this.layerX; } );
    Event.prototype.__defineGetter__("offsetY", function () { return this.layerY; } );
    Event.prototype.__defineGetter__("srcElement", function () {
        var node = this.target;
        while (node.nodeType != 1) node = node.parentNode;
        return node;
    });
}

function DragManager() {
    this.registeredElements = new Array();
   
    this.register = function(element) {
        // see if any removed element slots are available
        for (i=0;i!=this.registeredElements.length;i++) {
            if(this.registeredElements[i]==null) {
                this.registeredElements[i]=element;
                return;
            }
        }
        // Otherwise expand the register by one
        this.registeredElements[this.registeredElements.length]=element;
        // update
        this.update();
        // mark the element so we don't register twice
        element.markedForDrag = true;
    }
    this.remove = function(element) {
        // locate and remove the element if present.
        for (i=0;i!=this.registeredElements.length;i++) {
            if(this.registeredElements[i]==element)
                this.registeredElements[i]=null;
        }
        this.update();
        // demark the element
        element.markedForDrag = false;
    }
    this.grabElement = function(e) {
        // See if the source is registered and select if so
        if(e)event=e;
        for (i=0;i!=this.registeredElements.length;i++) {
            if(this.registeredElements[i]==event.srcElement) {
                this.selected=event.srcElement;
                break;
            }
        }
        if (this.selected!=null) {
            this.selected = (this.selected.proxy)?this.selected.proxy:this.selected;
            this.selected.style.zIndex = this.zIndex++;
            this.offsetX = event.clientX-(isNaN(parseInt(this.selected.style.left))?0:parseInt(this.selected.style.left));
            this.offsetY = event.clientY-(isNaN(parseInt(this.selected.style.top))?0:parseInt(this.selected.style.top));
            if (this.selected.invokeOnGrab!=null)
              this.selected.invokeOnGrab(event);
        }
    }
    this.dragElement = function(e) {
        if(e)event=e;
        if(this.selected) {
            if(this.selected.isAnchored) return;
            theoreticalLeft = event.clientX-this.offsetX;
            theoreticalTop = event.clientY-this.offsetY;
            if(!this.selected.verticalLock) {
                if (this.selected.topBound!=null||this.selected.topBound==0)
                  theoreticalTop=(theoreticalTop<this.selected.topBound)?this.selected.topBound:theoreticalTop;
                if (this.selected.bottomBound!=null||this.selected.bottomBound==0)
                    theoreticalTop=(theoreticalTop>this.selected.bottomBound)?this.selected.bottomBound:theoreticalTop;
                this.selected.style.top = theoreticalTop+"px";
                if (this.selected.invokeOnMove)
                  this.selected.invokeOnMove(event);
            }

            if(!this.selected.horizontalLock) {
                if (this.selected.leftBound||this.selected.leftBound==0)
                  theoreticalLeft=(theoreticalLeft<this.selected.leftBound)?this.selected.leftBound:theoreticalLeft;
                if (this.selected.rightBound||this.selected.rightBound==0)
                    theoreticalLeft=(theoreticalLeft>this.selected.rightBound)?this.selected.rightBound:theoreticalLeft;
                this.selected.style.left = theoreticalLeft+"px";
                if (this.selected.invokeOnMove)
                  this.selected.invokeOnMove(event);
            }

        }
        return false; // avoid event propagation downwards.
    }
    this.releaseElement = function(e) {
        if(e)event=e;
        if(this.selected) {
            if (this.selected.invokeOnRelease)
                this.selected.invokeOnRelease(event);
            this.selected=null;
        }
           
    }
}
DragManager.prototype.init = function() {
    document.zIndex = 0;                     
    if (!window.Element) {
    document.onmousedown = this.grabElement;
    document.onmousemove = this.dragElement;
    document.onmouseup = this.releaseElement;
    } else {
    window.onmousedown = this.grabElement;
    window.onmousemove = this.dragElement;
    window.onmouseup = this.releaseElement;
    }
}
DragManager.prototype.update = function() {
    if (!window.Element) {
    document.registeredElements = this.registeredElements;
    } else {
    window.registeredElements = this.registeredElements;
    }
}


Du må lige sige til hvis den ikke er helt overskuelig. funktionerne der kaldes hedder invokeOnXXXX, man sætter vertikal og horisontal lås med
_object.verticalLock=true;
_object.horizontalLock=true;
man sætter en bound med
_object.bottomBound=500; //bemærk en int, ikke "500px"
..osv..
man låser objektet med
_object.isAnchored=true;

Det du har der ligges seperart i en fil eller i head, hvad skal der ligges i body, for at aktivere scriptet?

-- du kan finde et eksempel her: http://eksperten.dk/spm/385198 ...

-- og til virkeligt brug ville jeg også smide al grundkoden i en ekstern fil !-)

... måske lige en reminder til dette, som stammer fra den mail-løse periode !-)

lukker uden svar :(