Code einer bestehenden Funktion hinzufügen

cybertron · #1 (**permalink**) 30.12.2008, 11:55

Hallo liebe JS-Profis

Ich sehe mich hier vor einem echt kniffligen Problem, ich habe schon die Board- und Google-Suche benutzt allerdings nichts relevantes gefunden. Vielleicht wisst ihr da mehr, oder die Suchen sind euch gnädig!

Grob gesagt geht es darum, einer Funktion weitere Zeilen an Code, nämlich einige Aufrufe von anderen Funktionen hinzuzufügen. So soll aus folgender Funktion:

Code:

function a () {
   code1;
   code2;
}

diese Funktion werden:

Code:

function a () {
   code1;
   code2;
   code3;
   code4;
}

Leider weiß das ausführende Script nicht welche Funktion das ist.

Denn es geht hier um ein Drag & Drop-Script. Ich habe einige Elemente, denen beim initialisieren des Scripts onmousemove, onmouseout und onmousedown-Events gesetzt werden. Allerdings werden dabei alte onmousemove Ereignisse überschrieben. Ich will jetzt aber, dass mein DnD-Script seinen Code den Ereignissen einfach nur "anhängt".

Deshalb meine Frage: Wie hänge ich Code an eine bestehende Funktion an?

lg cT

fox · #2 (**permalink**) 30.12.2008, 12:23

Das was du so vorhast wird nicht funktionieren. Am besten du speicherst die alte onmouse*-Funktion ab und rufst sie auf:

Code:

oldmouseOver = el.onmouseover;
el.onmouseover = function () {
    oldmouseOver();
    tu_was();
};

cybertron · #3 (**permalink**) 30.12.2008, 12:27

Zitat:

Zitat von fox

Das was du so vorhast wird nicht funktionieren. Am besten du speicherst die alte onmouse*-Funktion ab und rufst sie auf:

Code:

oldmouseOver = el.onmouseover;
el.onmouseover = function () {
    oldmouseOver();
    tu_was();
};

das ist eine gute idee... ich probiers gleich mal aus!
danke schon mal.

cybertron · #4 (**permalink**) 30.12.2008, 12:49

Hallo nochmal.
Leider funktioniert da irgendetwas nicht.
Da ich nämlich eine Reihe von Elementen initialisiere, kann ich die originalen Events nicht in einer Variable speichern, sondern muss sie in dem Element selbst speichern. Das sieht bei mir wie folgt aus:

Code:

element.orgmousedown = element.onmousedown;
element.onmousedown = function onmousedown (e) {
	if (typeof(this.orgmousedown) == 'function')
		this.orgmousedown(e);
	dnd.startdrag(e);
}

Leider scheint das nicht zu funktionieren, da beim Drag&Drop das Element nicht gefangen wird, also funktioniert die Übergabe bei einem der Parameter nicht ganz...

Was vielleicht noch wichtig ist: in der Funktion dnd.overelement (das ganze befindet sich nämlich in einer Klasse) werden wieder Parameter über >this< abgefragt. Könnte es sein, dass das nicht mehr funktioniert, wenn ich eine Folgefunktion aufrufe?

lg cT

protonenbeschleuniger · #5 (**permalink**) 30.12.2008, 13:50

Das sollte eigentlich so funktionieren. Alternativ such mal nach addEventListener (da gibt es im Netz zahlreiche Seiten, die diese Funktion Browserübergreifend nachbauen)

cybertron · #6 (**permalink**) 30.12.2008, 16:35

Mein Problem liegt wo anders.
Ihr habt unten der Code einer Datei, wo die Klasse schön verbaut wurde. Es funktioniert alles wie es soll. Was ich in der Funktion dnd.initdrag aber noch erreichen will, ist dass er die Mouse-Events nicht (er-)setzt, sondern nur "hinzufügt".
Der oben beschriebene Lösungsweg funktioniert nicht, weil wenn man nach unten schaut alle Funktionen mit dem Namespace this arbeiten, und der anscheinend in Funktionen, die von der eigentlichen aufgerufen werden, nicht weiter vererbt wird.
Und ich will nicht immer das Element "this" weiter geben müssen (außer es gibt keinen anderen weg)...

lg cT

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag and Drop</title>
<style type="text/css">
.container {
	margin:10px;
	height:30px;
	width:30px;
	border:1px solid #000;
}
.element {
	height:30px;
	width:30px;
	display:inline-block;
}
.container2 {
	margin: 10px;
	height: 30px;
	width:150px;
	border:1px solid #000;
}
#dragcont {
	position:absolute;
	padding:3px
}
</style>
<script type="text/javascript">
function addEventSimple(obj,evt,fn) {
	if (obj.addEventListener)
		obj.addEventListener(evt,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent('on'+evt,fn);
}

function removeEventSimple(obj,evt,fn) {
	if (obj.removeEventListener)
		obj.removeEventListener(evt,fn,false);
	else if (obj.detachEvent)
		obj.detachEvent('on'+evt,fn);
}
dnd = {
	dragging: false,
	dropenabled: false,
	insertenabled: false,
	insertid: undefined,
	insertshowing: false,
	showingid: undefined,
	orginsertborderL: undefined,
	orginsertborderR: undefined,
	dragid: undefined,
	targetid: undefined,
	init: function () {
		var elements;
		elements = document.getElementsByTagName("div");
		for (var i = 0; i < elements.length; i++)
			dnd.initdrag(elements[i].id);
		elements = document.getElementsByTagName("span");
		for (var i = 0; i < elements.length; i++)
			dnd.initdrag(elements[i].id);
		elements = document.getElementsByTagName("img");
		for (var i = 0; i < elements.length; i++)
			dnd.initdrag(elements[i].id);
	},
	initdrag: function (id) {
		if (id == '') return;

		var element = document.getElementById(id);
		if (element.getAttribute('dndtype') != null) {
			element.onmousedown = dnd.startdrag;
			element.onmousemove = dnd.overelement;
			element.onmouseout = dnd.outelement;
		} else if (element.getAttribute('dndaccept') != null) {
			element.onmouseover = dnd.overtarget;
			element.onmouseout = dnd.outtarget;
		}
	},
	startdrag: function(e) {
		var evt = e || window.event;
		addEventSimple(document,'mousemove',dnd.drag);
		addEventSimple(document,'mouseup',dnd.release);
		addEventSimple(document,'keydown',dnd.keydown);
		addEventSimple(document,'keypress',dnd.switchKeyEvents);
		dnd.dragging = true;
		dnd.dragid = this.id;
		document.body.appendChild(dnd.dragnode(evt));
		return false;
	},
	drag: function(e) {
		var evt = e || window.event;
		var dragcont = document.getElementById('dragcont');
		dragcont.style.left = evt.clientX + 17 + document.documentElement.scrollLeft + 'px';
		dragcont.style.top = evt.clientY + 16 + document.documentElement.scrollTop + 'px';
	},
	dragnode: function(evt) {
		if (dnd.dragging == true) {
			var node = document.createElement('div');
			node.id = 'dragcont';
			node.appendChild(document.getElementById(dnd.dragid).cloneNode(true));
			node.style.left = evt.clientX + document.documentElement.scrollLeft + 17 + 'px';
			node.style.top = evt.clientY + document.documentElement.scrollTop + 16 + 'px';
			node.style.border = '2px solid #F00';
			
			return node;
		} else {
			return null;
		}
	},
	switchKeyEvents: function () {
		// for Opera and Safari 1.3
		removeEventSimple(document,'keydown',dnd.keydown);
		removeEventSimple(document,'keypress',dnd.switchKeyEvents);
		addEventSimple(document,'keypress',dnd.keydown);
	},
	keydown: function (e) {
		var evt = e || window.event;
		var key = evt.keyCode;
		if (key == 27) {
			dnd.dropenabled = false;
			dnd.release();
		}
		return false;
	},
	overtarget: function(e) {
		if (dnd.dragging == true) {
			var dragobj = document.getElementById(dnd.dragid);
			var target = document.getElementById(this.id);
			var accepts = target.getAttribute('dndaccept').split(" ");
			for (var i=0; i < accepts.length; i++) {
				if (accepts[i] == dragobj.getAttribute('dndtype')) {
					dnd.dropenabled = true;
					dnd.targetid = this.id;
					document.getElementById('dragcont').style.border = '2px solid #0F0';
					break;
				}
			}
		}
	},
	outtarget: function(e) {
		if (dnd.dragging == true) {
			dnd.dropenabled = false;
			document.getElementById('dragcont').style.border = '2px solid #F00';
		}
	},
	overelement: function(e) {
		var evt = e || window.event;
		if (dnd.dropenabled == true) {
			var target = document.getElementById(dnd.targetid);
			if (target.getAttribute('dndinsert') == "true") {
				if (typeof(dnd.orginsertborderL) == 'undefined') {
					dnd.orginsertborderL = this.style.borderLeft;
					dnd.orginsertborderR = this.style.borderRight;
				}
				var element = this;
				var elementw = this.clientWidth;

				var elementx = 0;
				if (element.offsetParent) {
					do {
						elementx += element.offsetLeft;
					} while(element = element.offsetParent);
				}
				elementx += document.body.offsetLeft;
				elementx -= this.parentNode.scrollLeft;

				var mousex = evt.clientX;
				var deltax = mousex - elementx;
				
				if (deltax < elementw / 2) {
					// links einfügen
					dnd.insertid = this.id;
					this.style.borderLeft = "4px solid #F00";
					if (this.style.borderRight != dnd.orginsertborderR)
						this.style.borderRight = dnd.orginsertborderR;
					dnd.insertenabled = true;
				} else {
					if (this.nextSibling) {
						dnd.insertid = this.nextSibling.id;
						dnd.insertenabled = true;
					}
					this.style.borderRight = "4px solid #F00";
					if (this.style.borderLeft != dnd.orginsertborderL)
						this.style.borderLeft = dnd.orginsertborderL;
				}
				dnd.insertshowing = true;
				dnd.showingid = this.id;
			}
		}
	},
	outelement: function(e) {
		if (dnd.insertshowing == true) {
			var element = document.getElementById(dnd.showingid);
			element.style.borderLeft = dnd.orginsertborderL;
			element.style.borderRight = dnd.orginsertborderR;
			delete dnd.orginsertborderL;
			delete dnd.orginsertborderR;
			dnd.insertenabled = false;
			dnd.insertshowing = false;
		}
	},
	release: function() {
		removeEventSimple(document,'mousemove',dnd.drag);
		removeEventSimple(document,'mouseup',dnd.release);
		document.body.removeChild(document.getElementById('dragcont'));
		
		if (dnd.dropenabled == true) {
			var appendix = "";
			if (dnd.insertshowing == true) {
				var element = document.getElementById(dnd.showingid);
				element.style.borderLeft = dnd.orginsertborderL;
				element.style.borderRight = dnd.orginsertborderR;
				delete dnd.orginsertborderL;
				delete dnd.orginsertborderR;
				if (dnd.insertenabled == true) {
					appendix = '","' + dnd.insertid;
				}
			}
			var target = document.getElementById(dnd.targetid);
			var dndfunc = target.getAttribute('dndfunc');
			var funct = dndfunc + '("' + dnd.dragid + '","' + dnd.targetid + appendix + '")';
			window.setTimeout(funct, 0);
		}
		
		delete dnd.orginsertborderL;
		delete dnd.orginsertborderR;
		dnd.dragging = false;
		dnd.dropenabled = false;
		dnd.insertenabled = false;
		dnd.insertshowing = false;
	}
};

function start() {
	dnd.init();
}

function move(sourceID, targetID) {
	source = document.getElementById(sourceID);
	target = document.getElementById(targetID);
	
	if (source.parentNode.id != target.id) {
		if (target.hasChildNodes() == true) {
			// Austauschen
			var tarSrc = target.firstChild;
			var srcParent = source.parentNode;
			target.appendChild(source);
			srcParent.appendChild(tarSrc);
		} else {
			// Verschieben
			target.appendChild(source);
		}
	}
}

function move2(sourceID, targetID, insertID) {
	source = document.getElementById(sourceID);
	target = document.getElementById(targetID);

	if (!insertID) {
		target.appendChild(source);
	} else {
		target.insertBefore(source, document.getElementById(insertID));
	}

}
</script>
</head>

<body onload="javascript:start();">
<div id="p1" class="container" dndaccept="a" dndinsert="false" dndfunc="move"><div id="e1" style="background-color:#09F" class="element" dndtype="a"><p>A</p></div></div>
<div id="p2" class="container" dndaccept="a" dndinsert="false" dndfunc="move"><div id="e2" style="background-color:#FC0" class="element" dndtype="a"><p>B</p></div></div>
<div id="p3" class="container" dndaccept="a" dndinsert="false" dndfunc="move"></div>
<div id="p4" class="container2" dndaccept="ability" dndinsert="true" dndfunc="move2"><div id="a3" style="background-color:#09F" class="element" dndtype="ability"></div></div>
<div id="p5" class="container2" dndaccept=""><div id="a1" style="background-color:#09F" class="element" dndtype="ability"></div><div id="a2" style="background-color:#FC0" class="element" dndtype="ability"></div></div>
</body>
</html>

cybertron · #7 (**permalink**) 30.12.2008, 20:32

ich bin da gerade auf die prototype-eigenschaft von funktionen gestoßen. lässt sich damit vieleicht etwas machen?

lg cT

protonenbeschleuniger · #8 (**permalink**) 31.12.2008, 12:14

Ich kenn mich mit Frameworks nicht aus, aber meines Wissens gibt's da so Funktionen wie bindEventListener o.ä. diese brauchst du

cybertron · #9 (**permalink**) 31.12.2008, 12:32

Zitat:

Zitat von protonenbeschleuniger

Ich kenn mich mit Frameworks nicht aus, aber meines Wissens gibt's da so Funktionen wie bindEventListener o.ä. diese brauchst du

Das ist glaub ich schon mal der richtige Ansatz. Ich hab mich mal in das Thema rein gelesen (Prototype JavaScript framework: Function.bindAsEventListener), und bin gerade im Begriff es zu verstehen ^^

Was ich so raus lesen konnte, ist dass man eine Funktion an ein Event koppeln kann, was in meinem Fall auch erforderlich ist. Allerdings habe ich noch keine Ahnung, wie das genau funktionieren soll. Ich melde mich, sobald ich weiß, was man da genau tun muss...
Wäre über weitere Hilfe sehr erfreut!!

lg cT

protonenbeschleuniger · #10 (**permalink**) 31.12.2008, 12:54

statt

Code:

addEventSimple(document,'mousemove',dnd.drag);

müßte der Code so aussehen:

Code:

Event.observe(document.body, 'mousemove', dnd.drag.bindAsEventListener(this));

Wenn du protoype verwendest, könntest du sicher 'ne Menge Code einsparen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Tabellenfarbe im Design Code definieren	Maichen	(X)HTML	11	16.12.2010 10:37
[WIP]jQuery Code als Anfänger selber schreiben - benötige Hilfe	accessoire	Javascript & Ajax	4	09.06.2010 09:07
PHP Variable in JavaScript Funktion nutzen	Hashishin	Javascript & Ajax	4	24.11.2009 19:58
css code fragen! a.searchlink ???	Beta	CSS	2	15.09.2005 16:15