Hallo Duddle,
ich würde schon ganz gerne bei meiner ersten Variante bleiben und das Verschieben nicht über einen Button machen. Ich bin jetzt schon so weit gekommen - die Kerze läßt sich vergrößern und verkleinern und der aktuelle Stand speichern, allerdings nur über cookie. Doch jetzt ist da der Wurm drin und ich komme nicht mehr weiter. Die Kerze läßt sich nicht verschieben. Habe es vorher mit einer einfachen Box ausprobiert, hat alles super funktioniert, dann die Box entfernt und statt dessen die Kerze eingebunden und schon funktionierte es nicht mehr bis auf das Vergrößern und Speichern. Ich kann den Fehler nicht finden. Was ich außerdem nicht hinbekomme ist 2 Bilder übereinander mit onmouseover - onmouseout einzubinden und nur das onmouseover-Objekt zu verschieben. Wenn ich diese einbinde, funktioniert gar nichts mehr.
Vielleicht kannst Du Dir mal das Script anschaun:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
* { margin: 0 auto; padding: 0;}
body{ padding: 24px;}
#dragBereich{
width: 880px;
height: 500px;
border: none
background: #272727;
position: relative;}
#id_0{
float: left;
width: 68px;
height:180px;
margin-left: 20px;}
//-->
</style>
<script type="text/javascript">
<!--
// IDs der verschiebbaren IDs eintragen
var arrDragIDs = new Array("id_0");
function Drag(strID){
this.strDragClassName = "drag-el"; // Klassenname für Drag-Elemente
// Alle Elemente, die damit ausgezeichnet sind, werden
// als Drag-Elemente erkannt (z.B. class="class1 drag-el"
this.id = strID;
this.dragElem = document.getElementById(this.id);
this.intMouseX, this.intMouseY; // Koordinaten des Cursors
this.intOffsetX, this.intOffsetY; // Offset im Drag-Objekt
this.intStartX, this.intStartY; // Startkoordinaten zur Grössenberechnung (Skalierung)
this.intStartWidth, this.intStartHeight; // Startgrösse des Skalierobjektes
this.intMinScale = 10; // Minimale Skaliergrösse
this.blnStrg = false; // Variable zum Testen, ob Strg gedrückt gehalten wird
this.arrDragElems = new Array();
// Dragobjekt
this.m_objDrag = null;
// Overobjekt
this.m_objOver = null;
// Closure-Variable
objThis = this;
this.getEvent = function(objEvt){
return (window.event)? window.event : objEvt; // Passendes Event-Objekt zurückgeben
}
this.mousePos = function(objEvt){
if(window.event){
//objThis.intMouseX = window.event.clientX;
objThis.intMouseX = objThis.getEvent(objEvt).clientX;
objThis.intMouseY = objThis.getEvent(objEvt).clientY;
}else{
objThis.intMouseX = objThis.getEvent(objEvt).pageX;
objThis.intMouseY = objThis.getEvent(objEvt).pageY;
}
//document.getElementById("outID1").innerHTML = "Mouse: " + objThis.intMouseX + ", " + objThis.intMouseY;
// Falls ein Dragobjekt existiert
if(objThis.m_objDrag != null){
// Falls nicht die Strg-Taste gedrückt wird
if(!objThis.blnStrg){
// Koordinaten der linken oberen Ecke
var intX = (objThis.intMouseX - objThis.intOffsetX);
var intY = (objThis.intMouseY - objThis.intOffsetY);
// Falls das Drag-Objekt nach links hinausgeschoben wird
if(intX < 0){
objThis.m_objDrag.style.left = 0+"px";
// Falls das Drag-Objekt nach rechts hinausgeschoben wird
}else if(intX > (objThis.dragElem.offsetWidth - objThis.m_objDrag.offsetWidth)){
objThis.m_objDrag.style.left = (objThis.dragElem.offsetWidth - objThis.m_objDrag.offsetWidth) + "px";
// sonst
}else{
objThis.m_objDrag.style.left = intX + "px";
}
// Falls das Drag-Objekt nach oben hinausgeschoben wird
if(intY < 0){
objThis.m_objDrag.style.top = 0+"px";
// Falls das Drag-Objekt nach unten hinausgeschoben wird
}else if(intY > objThis.dragElem.offsetHeight - objThis.m_objDrag.offsetHeight){
objThis.m_objDrag.style.top = (objThis.dragElem.offsetHeight - objThis.m_objDrag.offsetHeight) + "px";
// sonst
}else{
objThis.m_objDrag.style.top = intY + "px";
}
// Falls die Strg-Taste gedrückt wird
}else{
objThis.m_objDrag.style.cursor = "se-resize";
// Aktuelle Grössenänderung berechnen
var intHelpX = objThis.intMouseX - objThis.intStartX;
var intHelpY = objThis.intMouseY - objThis.intStartY;
//document.getElementById("outID2").innerHTML = "new width, new height: " + (objThis.intStartWidth+intHelpX) + ", " + (objThis.intStartHeight+intHelpY);
objThis.m_objDrag.style.width = (((objThis.intStartWidth+intHelpX)<objThis.intMinScale)? objThis.intMinScale : (objThis.intStartWidth+intHelpX)) + "px";
objThis.m_objDrag.style.height = (((objThis.intStartHeight+intHelpY)<objThis.intMinScale)? objThis.intMinScale : (objThis.intStartHeight+intHelpY)) + "px";
} // ENDE - if(!objThis.blnStrg)
} // ENDE - if(objThis.m_objDrag != null)
}
this.startDrag = function(objEvt){
var objSrc = (window.event)? ((window.opera)?window.event.target:window.event.srcElement) : (objEvt.target);
// Startpositionen speichern
objThis.intStartX = objThis.intMouseX;
objThis.intStartY = objThis.intMouseY;
// Startgrösse speichern
objThis.intStartWidth = objSrc.offsetWidth;
objThis.intStartHeight = objSrc.offsetHeight;
// Offsets zur linken oberen Ecke bstimmen
objThis.intOffsetX = objThis.intMouseX - objSrc.offsetLeft;
objThis.intOffsetY = objThis.intMouseY - objSrc.offsetTop;
// Globales Dragobjekt
objThis.m_objDrag = objSrc;
}
this.stopDrag = function(){
if(objThis.m_objDrag == null) return;
// Cookie mit ID des Drag-Objektes als Name und die zugehörigen Positionswerte schreiben
Cookie.setCookie(objThis.m_objDrag.id, parseInt(objThis.m_objDrag.style.top)+"###"+parseInt(objThis.m_objDrag.style.left)+"###"+parseInt(objThis.m_objDrag.style.width)+"###"+parseInt(objThis.m_objDrag.style.height), (1000*60*60*24*365));
// Cursor zurücksetzen
objThis.m_objDrag.style.cursor = "default";
// Drag-Objekt zerstören
objThis.m_objDrag = null;
}
// Funktion zum Setzen des Resize-Cursors
this.setCursor = function(objCursor){
// Falls die Strg-Taste gedrückt gehalten wird
if(objThis.blnStrg){
objCursor.style.cursor = "se-resize";
}
// Over-Objekt speichern
objThis.m_objOver = objCursor;
}
// Funktion für MouseOut-Event
this.clearCursor = function(objCursor){
// Cursor zurücksetzen
objCursor.style.cursor = "default";
// Over-Objekt zurücksetzen
objThis.m_objOver = null;
}
this.checkStrg = function(objEvt){
objEvt = (window.event)? window.event : objEvt;
var intKeyCode = (objEvt.keyCode)? objEvt.keyCode : objEvt.which;
if(intKeyCode == 17){
objThis.blnStrg = true;
// Falls sich der Cursor bereits über einem Dragobjekt befindet (d.h. es existiert ein Over-Objekt)
if(objThis.m_objOver != null)
objThis.setCursor(objThis.m_objOver);
}
}
this.releaseStrg = function(objEvt){
objEvt = (window.event)? window.event : objEvt;
var intKeyCode = (objEvt.keyCode)? objEvt.keyCode : objEvt.which;
if(intKeyCode == 17){
objThis.blnStrg = false;
// Falls sich der Cursor bereits über einem Dragobjekt befindet
if(objThis.m_objOver != null)
objThis.m_objOver.style.cursor = "default";
}
}
this.getElementsByClassName = function(strClassName){
var arrHelp = new Array();
// Suchpattern
var strPattern = eval("/"+strClassName+"/");
// Alle Elemente über Wildcard ermitteln
var arrTags = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) ? document.all : document.getElementsByTagName('*');
// Alle Elemente durchlaufen
for(var varEntry in arrTags){
// Falls eine Klasse existiert UND dem Suchkriterium entspricht
if((arrTags[varEntry].className) && (arrTags[varEntry].className.match(strPattern))){
// In Klassenarray schreiben
//objThis.arrDragElems[objThis.arrDragElems.length] = arrTags[varEntry];
arrHelp[arrHelp.length] = arrTags[varEntry];
}
}
return arrHelp;
}
// Drag-Elemente initialisieren (d.h. die notwendigen Event-Handler zufügen)
this.init = function(){
// Array der Drag-Elemente anhand einer eindeutigen Klasse ermitteln
objThis.arrDragElems = objThis.getElementsByClassName(objThis.strDragClassName);
// Alle Drag-Elemente durchlaufen und die erforderlichen Eventhandler zuweisen
for(var i=0; i<objThis.arrDragElems.length; i++){
//objThis.arrDragElems
.onmousedown = function(event){ objThis.startDrag(event);};
objThis.arrDragElems.onmousedown = objThis.startDrag;
objThis.arrDragElems.onmouseup = objThis.stopDrag;
objThis.arrDragElems.onmouseover = function(){objThis.setCursor(this);};
objThis.arrDragElems.onmouseout = function(){objThis.clearCursor(this);};
}
}
this.init();
// ++++++ TESTFUNKTIONEN ++++++
this.testFunc = function(){
if(this.blnStrg)
alert("Mit Steuerung");
else
alert("Ohne Steuerung");
}
}
window.onload = function(){
objDrag = new Drag("dragBereich"); // Neues Drag-/Resizeobjekt mit der ID des Bereichs erstellen
document.onmousemove = objDrag.mousePos;
document.onmouseup = objDrag.stopDrag;
document.onkeydown = objDrag.checkStrg;
document.onkeyup = objDrag.releaseStrg;
// Falls Cookies erlaubt sind
if(Cookie.checkCookie() != false){
// Array mit den IDs für die DragElemente durchlaufen
for(var i=0; i<arrDragIDs.length; i++){
// Cookie zu ID auslesen
var strCookie = Cookie.getCookie(arrDragIDs);
// Falls ein Cookie zur ID existiert -> Element positionieren
if(strCookie != null){
var arrHelp = strCookie.split("###");
if(document.getElementById(arrDragIDs)){
document.getElementById(arrDragIDs).style.top = arrHelp[0] + "px";
document.getElementById(arrDragIDs).style.left = arrHelp[1] + "px";
document.getElementById(arrDragIDs).style.width = arrHelp[2] + "px";
document.getElementById(arrDragIDs).style.height = arrHelp[3] + "px";
}
}
}
}
}
var Cookie = {
/* *********************** Funktion zum Setzen eines Cookies *************************** *
* Parameter: *
* strName - Bezeichnung für die Cookievariable *
* varWert - Wert, welcher der Cookievariablen zugewiesen werden soll *
* longExpires - Gültigkeitsdauer des Cookies in Millisekunden *
* strDomain - optional, zugehörige Domain *
* strPath - optional, zugehöriger Pfad *
* boolSecure - optional, Sicherheitsrichtlinien für den Cookie aktivieren (true/false) *
* ************************************************************************************* */
setCookie: function(strName, varWert, longExpires, strDomain, strPath, boolSecure){
// Datumsobjekt mit aktuellen Werten anlegen
var dateExpires = new Date();
// Zeitpunkt der Ungültigkeit des Cookies berechnen
dateExpires = new Date(dateExpires.getTime() + longExpires);
// In gültiges Datum umwandeln
dateExpires.setTime(dateExpires);
// Datum in GMT-String umwandeln
dateExpires = dateExpires.toGMTString();
// Cookie-Variable anlegen
var strCookie = strName + "=" + unescape(varWert);
strCookie += (strDomain) ? "; domain=" + strDomain : "";
strCookie += (longExpires) ? "; expires=" + dateExpires : "";
strCookie += (strPath) ? "; path=" + strPath : "";
strCookie += (boolSecure) ? "; secure" : "";
document.cookie = strCookie;
},
/* ******************* Löschen eines Cookies ******************** *
* Parameter: *
* strName - Name der Cookievariablen, die gelöscht werden soll *
* strDomain - optional; zugehörige Domain *
* strPfad - optional; zugehöriger Pfad *
* ************************************************************** */
eraseCookie: function(strName, strDomain, strPath){
// Datumsobjekt instanziieren, das in der Vergangenheit liegt (01.01.1970, 00:00:01 Uhr)
var dateExpires = new Date(1970, 0, 1, 0, 0, 1);
// Datum in GMT-String umwandeln
dateExpires = dateExpires.toGMTString();
// Cookie ein Datum in der Vergangenheit zuweisen
var strCookie = strName + "=; expires="+dateExpires;
strCookie += (strDomain) ? "; domain=" + strDomain : "";
strCookie += (strPath) ? "; path=" + strPath : "";
document.cookie = strCookie;
},
/* ********************* Cookie auslesen *********************************** *
* Der Wert zur Variablen strName wird zurückgegeben *
* Parameter: strName - Name der Variablen, deren Wert ermittelt werden soll *
* ************************************************************************* */
getCookie: function(strName){
var i = 0 //Suchposition im Cookie
var strSuche = strName + "=";
// Solange das Ende des CookieStrings noch nicht erreicht wurde
while(i < document.cookie.length){
// Falls der Name des Cookies gefunden wurde
if (document.cookie.substring(i, i+strSuche.length) == strSuche){
// Suche nach dem ersten Semikolon ab dem Auftreten des Cookie-Namens
var intEnde = document.cookie.indexOf(";", i+strSuche.length);
// Stringlänge des Cookie-Wertes ermitteln
intEnde = (intEnde > -1) ? intEnde : document.cookie.length;
// Cookie-Wert auslesen
var strCookie = document.cookie.substring(i+strSuche.length, intEnde);
// Zeichen aus der URL-Schreibweise wieder zurückwandeln und zurückgeben
return unescape(strCookie);
}
// Position im Cookie-String inkrementieren
i++;
}
return null;
},
/* ********************* Cookie auslesen *********************************** *
* Die Funktion verwendet zum Ermitteln der Cookievarialben reluläre Aus- *
* drücke. *
* *
* Der Wert zur Variablen strName wird zurückgegeben *
* Parameter: strName - Name der Variablen, deren Wert ermittelt werden soll *
* ************************************************************************* */
getCookie_: function(strName){
var strCookie
var strValue = false;
// Falls Cookies unterstützt werden
if(strCookie = document.cookie){
// Falls ein Cookie gefunden wird
// Im RegExp wird jedes Zeichen übernommen, das KEIN Semikolon ist
// RegExp wird mit zwei Parametern aufgerufen - der zweite bedeutet GLOBALE Suche
// (mgl. wäre z.B. auch 'ig', global und ohne Beachtung von Gross-/Kleinschreibung)
if(strCookie.match( new RegExp(strName + '=([^;]*)', 'g'))){
strValue = RegExp.$1;
return unescape(strValue);
}
}
return null;
},
/* ************* Testen, ob Browser Cookies zulässt *********************** *
* Rückgabe: true, falls Unterstützung von Cookies, false sonst *
* ************************************************************************ */
checkCookie: function(){
// Versuch, einen Cookie zu setzen
this.setCookie("CookieTest", "OK");
// Falls der Cookie nicht gesetzt werden konnte
if (!this.getCookie("CookieTest"))
return false;
else{
this.eraseCookie("CookieTest"); // Cookie wieder löschen
return true;
}
},
// Falls Cookies nicht erlaubt sind
// if(checkCookie() == false) alert("Keine Cookies unterstützt");
isCookie: function(){
if(document.cookie)
document.getElementById("cookieID").firstChild.data = document.cookie;
}
}
//-->
</script>
</head>
<body>
<div id="outID1"> </div>
<div id="outID2"> </div>
<div id="dragBereich">
<img class="class1 drag-el" id="id_0" src="http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif"/></div>
</div>
</body>
</html>
Hier der Code für animiert - nicht animiert
<p><img title="Mit Drag&Drop positionieren" onmouseover="this.src='http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif';" onmouseout="this.src='http://www.4-wände.de/hpfixseparat_blumenkerze_1.gif';" src="http://www.4-wände.de/hpfixseparat_blumenkerze_1.gif" alt="Blumenkerze" width="68" height="180" /></p>
Und hier die Testseite
Das kann doch nun gar nicht mehr so schwierig sein, nur wo steckt der Fehler oder was mache ich falsch? Wäre Dir sehr dankbar, wenn Du mir helfen könntest.
Viele Grüße
Schippo
