Antworten auf deine Fragen:
Neues Thema erstellen

HTML5 Drag + Drop

Schippo

Noch nicht viel geschrieben

Hallo @All,

ich benötige dringend Hilfe bei den vielen Optionen mit "Draggable". Bin noch ein absoluter Newbie und mit der Umsetzung noch etwas überfordert. Ich möchte auf meiner Website ein Hilfsprojekt für mißhandelte Tiere erstellen. Eine Solidaraktion soll das Bilden einer Lichterkette werden. Hierzu befindet sich bereits eine animierte Kerze (Mutterobjekt) an einer fest positionierten Stelle der Seite. Von dieser Kerze werden jetzt beliebig viele Duplikate erzeugt und per Drag+Drop zu einer Lichterkette formiert. Die Mutterkerze bleibt dabei immer an ihrem Platz. Das habe ich soweit auch schon hinbekommen und mein Script im Head-Bereich schaut so aus:
PHP:
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
(function() {
  'use strict';

  $(document).ready(function()
{
  $("#verschieben").draggable({
   helper: "clone",
  cursor: "move",
  opacity: 0.7,
  scroll: false
  });

  $("#verschieben").bind('dragstop', function(event, ui) { $(this).after($(ui.helper).clone().draggable());});
});
})();
</script>
Was ich einfach nicht hinbekomme ist eine Stop-Funktion, also das Speichern der positionierten Kerzen bei Verlassen der Seite. Verläßt man jetzt die Seite, ist die Lichterkette wieder verschwunden und nur die Mutterkerze bleibt allein zurück.

Der 2. Punkt wäre das Verschieben über einen bestimmten Bereich der Seite hinaus. Jetzt kann man die Kerzen überall positionieren, selbst außerhalb der Seite. Die Seite ist jedoch gerahmt (eine Art Container). Auch innerhalb der Seite sollte schon ein definierter Bereich xy festgelegt werden, über den hinaus nichts positioniert werden kann, denn hierauf befindet sich u. a. eine Kommentarfunktion, die natürlich nicht überlagert werden darf.

Wie kann ich das hinbekommen und kann mir hier jemand von Euch behilflich sein. Ich blicke hier nicht mehr durch und bin schon dem Verzweifeln nahe.

Viele Grüße
Schippo

Bitte in Zukunft alle gezeigten Code-Schnipsel in eine Code-Tag setzen.Danke! Minaya[MOD]
 
Zuletzt bearbeitet von einem Moderator:

Duddle

Posting-Frequenz: 14µHz

Was ich einfach nicht hinbekomme ist eine Stop-Funktion, also das Speichern der positionierten Kerzen bei Verlassen der Seite. Verläßt man jetzt die Seite, ist die Lichterkette wieder verschwunden und nur die Mutterkerze bleibt allein zurück.
Wie soll das denn persistent gespeichert werden? Bei dir auf dem Server oder pro Nutzer lokal?

Der zweite Punkt sollte recht einfach umsetzbar sein, wenn ich mich recht erinnere hat jQuerys Draggable da eine Option.

Gibt es das was du bisher gemacht hast irgendwo online zum ausprobieren? Alternativ könntest du ein besseres Minimalbeispiel zeigen - also bspw. mit relevantem HTML-Code - damit es einfacher nachzuvollziehen ist.


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

vielen Dank für Deine Rückantwort. Die Kerzen sollen global gespeichert werden, also so, daß jeder Besucher sehen kann, wie die Lichterkette wächst. Da kommt m.E. lokale Speicherung nicht infrage.

Bei jQuery hab ich mich umgeschaut, konnte aber nichts finden, was zu meiner Lösung beigetragen hätte. Ich habe eine Testseite nur mit der Kerze angelegt, auf der man das bisherige Ergebnis sehen kann http://dogs24.xobor.de/page-645566-5.html

und hier der html-code dazu:

<div id="verschieben"><img src="http://www.4-wände.de/hpfixseparat_blumenkerze.gif"></div>

Hier die Seite, auf der das Ganze nachher umgesetzt werden soll http://dogs24.xobor.de/page-645566-4.html

Also allein komme ich hier nicht weiter. Wäre dankbar für jegliche Hilfe.

Gruß Schippo
 

Duddle

Posting-Frequenz: 14µHz

Die Kerzen sollen global gespeichert werden, also so, daß jeder Besucher sehen kann, wie die Lichterkette wächst. Da kommt m.E. lokale Speicherung nicht infrage.
Also brauchst du einen Mechanismus, der die Position einer Kerze neu speichert - idealerweise bei "dragstop". Das ist dann ein Script auf dem Server, welches in einen Speicher (Datei oder Datenbank) schreibt. Weiterhin brauchst du ein Script, welches die Positionen auslesen kann und das HTML mit den Kerzen erzeugt.

Das ist nicht trivial, aber auch nicht sonderlich schwierig, je nachdem wie deine PHP-Fertigkeiten sind.
Bei jQuery hab ich mich umgeschaut, konnte aber nichts finden, was zu meiner Lösung beigetragen hätte.
Das dritte Beispiel ("constrain movement") in der Draggable-Doku beschreibt das Einschränken des erlaubten Bereichs. Konkret reicht also schon eine neue Zeile:
Code:
  $("#verschieben").draggable({
   helper: "clone",
  cursor: "move",
  opacity: 0.7,
   containment: "parent",
  scroll: false
  });


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

vielen Dank für Deine Tipps und Deine Unterstützung. Meine PHP-Fähigkeiten sind gleich 0, aber ich denke, trotzdem auf einem guten Weg zu sein. Meiner Meinung nach läßt sich das alles mit den vielen Optionen von Draggable lösen, muß mich nur da richtig reinknien. Hab mir die Doku mal in mein Testforum geladen, da ist im Prinzip alles dabei, was ich brauche. Nur das Verstehen auf englisch und die Umsetzung bzw. die vielen Zeichen und Klammern machen mir zu schaffen. Es wird noch etwas dauern, bis ich mein Ziel erreicht habe. Funktion "stop: function( event, ui ) {}" muß ich mir genau anschaun und ein wenig herumtüfteln. Aber - der Weg ist das Ziel.

Danke erst einmal und viele Grüße

Schippo
 

Duddle

Posting-Frequenz: 14µHz

Heißt gleich 0, dass du auch nicht wüsstest, was du mit einem fertigen Script anstellen sollst? Falls ich die Tage Zeit hab, würde ich mal fix was schreiben. Wie gesagt: es ist nicht trivial, aber auch kein echter Aufwand, d.h. zum Üben gut geeignet.


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle

für Deine Unterstützung und Dein Angebot danke ich Dir wirklich sehr. Ganz so schlimm ist es nun auch nicht, aber Übertreibung macht anschaulich und meine Fähigkeiten sind noch sehr bescheiden. Habe erst vor 2 Monaten mit HTML begonnen, mich schlau gelesen und durch ausprobieren gelernt. Meine erzielten Ergebnisse, denke ich, können sich durchaus sehen lassen.

Ich bin gestern ein ganzes Stück weitergekommen und ich denke, kurz vorm Ziel zu sein. Allerdings nicht mit jQuery und draggable. Damit bin ich nicht klargekommen. Habe das Ganze erst einmal mit einer Box ausprobiert (Testseite http://dogs24.xobor.de/page-645566-6.html). Nur das Speichern bereitet mir noch Probleme. Jetz wird per Cookie gespeichert, aber das ist nicht optimal, besser wäre global auf meinem Server. Der Bereich ist jetzt eingegrenzt und die Box kann man mit Strg vergrößern oder verkleinern (hier muß ich allerdings noch den Bereich einschränken). Nur den Bereich nach unten automatisch erweitern, so daß sich die Kommentarfunktion mit verschiebt, habe ich noch nicht gelöst. Ich glaube, das ist aber nicht schwierig. Außerdem habe ich noch keinen Plan, wie ich das lösen kann, daß nur die flackernde Kerze verschoben wird. Es sind 2 Bilddateien übereinander (nicht animiert und animiert - onmouseover - onmouseout). Es soll natürlich nur die animierte Kerze verschoben werden.

Falls ich es doch nicht hinbekommen sollte, würde ich gern auf Dein Angebot zurückkommen. Ich würde mich auch erkenntlich zeigen und Deinen Einsatz honorieren. Das meine ich ernst. Habe wirklich nicht gedacht, daß das Ganze so schwierig ist. Aber ich habe bisher noch alles hinbekommen, natürlich manches auch mit Unterstützung.

Ich melde mich auf jeden Fall wieder und gebe Feedback zum aktuellen Stand.

Viele Grüße

Schippo
 

Duddle

Posting-Frequenz: 14µHz

Ich glaube, du machst es dir unnötig schwer.

Ein Button zum Hinzufügen einer neuen Kerze würde so ziemlich alle Probleme lösen: du müsstest dir nur die Zahl der Kerzen merken und dementsprechend viele erzeugen lassen. Wenn du es CSS-technisch richtig machst, passen die dann auch automatisch in ihren Container bzw. erweitern ihn automatisch.

Natürlich hat ein Button keine so "emotionale Verbindung" zum Subjekt wie das tatsächliche Ziehen des Bildes. Aber eine stabile, einfache Lösung mit 1h Aufwand ist i.d.R. besser als eine komplexe Lösung mit 10h Aufwand. Letztlich ist das aber deine Entscheidung.

Edit: oder eine Misch-Lösung: das "dragstop" löst das gleiche aus wie ein einfacher Button: ein Zähler wird serverseitig hochgesetzt, die Seite neu geladen und n+1 viele Kerzen erzeugt. Das scheint mir derzeit der beste Ansatz zu sein.


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

das ist sicherlich richtig, daß man sich mit Hilfe eines Buttons vieles vereinfachen würde, aber es ist doch nicht dasselbe. Löst aber alle Probleme. Diese Möglichkeit habe ich bisher gar nicht in Betracht gezogen. Ich werde mir das mal durch den Kopf gehen lassen.

Bei meiner jetzigen Methode ist ja auch das Problem zu lösen, was passiert, wenn zur gleichen Zeit mehrere Besucher eine Kerze auf derselben Position platzieren möchten. Alles nicht so einfach und wirklich weitergekommen bin ich heute nicht.

Danke für Deinen Denkanstoß

Viele Grüße

Schippo
 

Schippo

Noch nicht viel geschrieben

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">&nbsp;</div>
<div id="outID2">&nbsp;</div>

<div id="dragBereich">
<img class="class1 drag-el" id="id_0" src="http://www.4-w&auml;nde.de/hpfixseparat_blumenkerze_2.gif"/></div>
</div>
</body>
</html>

Hier der Code für animiert - nicht animiert

<p><img title="Mit Drag&amp;Drop positionieren" onmouseover="this.src='http://www.4-w&auml;nde.de/hpfixseparat_blumenkerze_2.gif';" onmouseout="this.src='http://www.4-w&auml;nde.de/hpfixseparat_blumenkerze_1.gif';" src="http://www.4-w&auml;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
 

Schippo

Noch nicht viel geschrieben

sorry, ich werde es künftig berücksichtigen.

hier der korrekte code:

HTML:
<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[i].onmousedown = function(event){ objThis.startDrag(event);};
      objThis.arrDragElems[i].onmousedown = objThis.startDrag;
      objThis.arrDragElems[i].onmouseup   = objThis.stopDrag;
      objThis.arrDragElems[i].onmouseover = function(){objThis.setCursor(this);};
      objThis.arrDragElems[i].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[i]);
      // Falls ein Cookie zur ID existiert -> Element positionieren
        if(strCookie != null){
          var arrHelp = strCookie.split("###");
        if(document.getElementById(arrDragIDs[i])){
            document.getElementById(arrDragIDs[i]).style.top    = arrHelp[0] + "px";
            document.getElementById(arrDragIDs[i]).style.left   = arrHelp[1] + "px";
            document.getElementById(arrDragIDs[i]).style.width  = arrHelp[2] + "px";
            document.getElementById(arrDragIDs[i]).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">&nbsp;</div>
<div id="outID2">&nbsp;</div>

<div id="dragBereich">
<img class="class1 drag-el" id="id_0" src="http://www.4-w&auml;nde.de/hpfixseparat_blumenkerze_2.gif"/></div>
</div>
</body>
</html>
 

Duddle

Posting-Frequenz: 14µHz

Du hast ist ein sehr gutes Beispiel für
eine komplexe Lösung mit 10h Aufwand
konstruiert, obwohl es noch nichtmal eine "Lösung" ist. Zum Beispiel: welchen Zweck hat die Skalieren-Funktion? Die ist für mich vollkommen überflüssig, präsentiert dafür aber mehr Möglichkeiten für Fehler und hat sicher wenigstens eine Stunde verschlungen.

Auch nutzt du vorhandene Werkzeuge und Bibliotheken nicht aus. Beispielsweise musst du this.getElementsByClassName nicht selbst definieren, wenn du jQuery hast. Du hast auch sehr viel Code für das Drag&Drop drin, der sicher problemlos von jQuerys Draggable ersetzt werden kann. Zum Setzen der Cookies (auch wenn das nur für Testzwecke ist) reicht es, ein kleines PlugIn/Script einzubinden, um viel der Komplexität zu verstecken.

Je weniger Code du selber schreibst (und den Rest von guten, getesteten, durchdachten PlugIns übernehmen lässt), desto einfacher ist es ihn zu verstehen und zu debuggen. Ich weiß auch nicht, wie du debuggst. Benutzt du (bzw. ein äquivalent für deinen Browser)? Dann würdest du sehen, dass auf schon jQuery nicht richtig eingebunden wird, ohne das nix funktioniert.

Falls du das ganze als Übungsaufgabe zum Lernen von JS siehst, solltest du trotzdem erstmal ein Feature komplett entwickeln, bevor du zum nächsten gehst. Zum Beispiel:
Was ich außerdem nicht hinbekomme ist 2 Bilder übereinander mit onmouseover - onmouseout einzubinden und nur das onmouseover-Objekt zu verschieben.
Das brauchst du nicht, solange die Grundfunktionalität nicht besteht. Auch zweifle ich daran, dass du unbedingt JS dafür benötigst. Wenn du ein anderes Bild beim Drüber-Hovern anzeigen willst, bietet sich :hover von CSS an.

Habe es vorher mit einer einfachen Box ausprobiert, hat alles super funktioniert, dann die Box entfernt und statt dessen die Kerze eingebunden
Dann war die Box kein Bild wie die Kerze jetzt. Hast du den Code noch irgendwo da?

Ich möchte nochmal unterstreichen, dass eine einfache, funktionierende Lösung üblicherweise besser ist als ein komplexer, nicht-so-richtig-funktionierender Ansatz.
Für dein Problem wäre mein Vorgehen wie folgt: Nutzer Drag&Dropt die Kerze (implementiert in 5 Zeilen mit jQuery Draggable), das "Drop" davon löst den Speichervorgang aus (POST an ein serverseitiges Script auslösen, das sind vielleicht 2 Zeilen in jQuery) und einen Seitenreload (1 Zeile). Beim Seitenaufbau generiert der Server anhand der gespeicherten Positionen das entsprechende HTML und die Sache ist fertig. Die schwierigste Sache hierbei ist das PHP-Script, der größte Knackpunkt das Umgehen mit unerwünschten Kerzenpositionen. Die ganzen Extra-Gimmicks können danach integriert werden.


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

ich hätte auch noch diese Variante:

HTML:
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
(function() {  
    'use strict';
   
    $(document).ready(function()
{
    $("#verschieben").draggable({
    helper: "clone",
        cursor: "move",
        opacity: 0.7,
        containment: "parent",
        scroll: false
    });
   
    $("#verschieben").bind('dragstop', function(event, ui) { $(this).after($(ui.helper).clone().draggable());});
});
})();
</script>

HTML:
<div id="verschieben"><img src="http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif"></div>

Testseite: http://dogs24.xobor.de/page-645566-5.html

Hier fehlt die Speicherfunktion und onmouseover - onmouseout. Außerdem funktioniert die Begrenzung für die Seite nicht richtig (containment: "parent",) Bei Copy-Objekt greift die Begrenzung nicht, nur beim Mutterobjekt.

Gruß Schippo
 

Duddle

Posting-Frequenz: 14µHz

Ich frage mal ein paar Dinge, bevor ich Annahmen treffe: was soll passieren, wenn ein Nutzer die neue Kerze loslässt? Ist die dann fest oder darf sie nochmal verschoben werden? Oder soll sie beim nächsten Drag&Drop auch klonen?
Ab wann ist eine Kerze fest? Darf jeder Nutzer jede Kerze beliebig verschieben? Oder dürfen Kerzen nur ein einziges Mal positioniert werden (beim Erstellen)?
Dürfen Kerzen irgendwie entfernt werden (ausser dem Löschen aus der "Datenbank" der Kerzen-Positionen)?


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

jetzt hast Du mir aber gehörig den Kopf gewaschen - ich war so stolz auf das Erreichte. Debuggen - was ist das? Spaß beiseite, natürlich weiß ich, was das ist, hatte aber damit bisher nichts am Hut. Ausprobiert - ging - und fertig! Wie die Newbies nun mal so sind. Das Script hat sich ein Informatiker angeschaut, der aber für die Fehlerbehebung keinen richtigen Plan hatte.

Ich habe dieses Forum vor 2 Monaten mit vorgefertigtem Template und allen Funktionen ausgestattet gemietet und mich ans Werk gemacht. JQuery war standardmäßig schon vorinstalliert.

Du hast durchaus recht, daß man die Funktion vergrößer - verkleinern nicht benötigt. Die war aber in dem fertigen Script vorhanden und deshalb habe ich sie mit übernommen.

Hier das Script (lediglich dem Style meiner Seite angepaßt):

HTML:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
* { margin: 0; padding: 0;}
body{ padding: 24px;}
#dragBereich{ width: 850px;
                            height: 500px;
              background: #272727;
              position: relative;}
#id_0, #id_1, #hsv{ font-size: 1px;
                                        line-height: 1px;}
#id_0{ position: absolute;
             top: 100px;
       left: 100px;
       width: 100px;
       height: 100px;
       border: 1px solid #000;
       background: #090;}
#id_1{ position: absolute;
             top: 390px;
       left: 390px;
       width: 100px;
       height: 100px;
       border: 1px solid #000;
       background: #369;}
#hsv{ position: absolute;
             top: 190px;
       left: 390px;
       width: 100px;
       height: 100px;
       border: 1px solid #000;
       background: #009;}
//-->
</style>

<script type="text/javascript">
  <!--
// IDs der verschiebbaren IDs eintragen
var arrDragIDs = new Array("id_0", "id_1", "hsv");

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){
        // Fall 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[i].onmousedown = function(event){ objThis.startDrag(event);};
      objThis.arrDragElems[i].onmousedown = objThis.startDrag;
      objThis.arrDragElems[i].onmouseup   = objThis.stopDrag;
      objThis.arrDragElems[i].onmouseover = function(){objThis.setCursor(this);};
      objThis.arrDragElems[i].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[i]);
      // Falls ein Cookie zur ID existiert -> Element positionieren
        if(strCookie != null){
          var arrHelp = strCookie.split("###");
        if(document.getElementById(arrDragIDs[i])){
            document.getElementById(arrDragIDs[i]).style.top    = arrHelp[0] + "px";
            document.getElementById(arrDragIDs[i]).style.left   = arrHelp[1] + "px";
            document.getElementById(arrDragIDs[i]).style.width  = arrHelp[2] + "px";
            document.getElementById(arrDragIDs[i]).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>
<h1 style="font-weight: normal; padding: 0 0 12px;">Drag and Drop mit Positionsspeichern und Resizefunktion</h1>
<p style="padding: 0 0 9px;">Das Beispiel demonstriert <b>Drag and Drop</b> in einem bestimmten Bereich,
wobei die aktuelle Position eines bewegten Elementes in einem Cookie gespeichert wird. Beim erneuten
Aufruf der Seite werden die letzten Positionen wieder hergestellt.</p>
<p>Ebenso ist es m&ouml;glich, bei gedr&uuml;ckter <b>Strg-Taste</b> die Gr&ouml;sse der Elemente zu ver&auml;ndern. Die neuen
Gr&ouml;ssen werden ebenfalls in Cookies gespeichert.</p>

<div id="outID1">&nbsp;</div>
<div id="outID2">&nbsp;</div>

<div id="dragBereich">
  <div class="class1 drag-el" id="id_0"></div>
  <div class="drag-el" id="id_1"></div>
  <div class="drag-el" id="hsv"></div>
</div>

</body>
</html>

Gruß Schippo
 

Duddle

Posting-Frequenz: 14µHz

jetzt hast Du mir aber gehörig den Kopf gewaschen - ich war so stolz auf das Erreichte.
Meine Intention war das nicht und so solltest du es auch nicht lesen.
Kritik dient der Verbesserung. Wenn in einem Rezept Salz fehlt, heißt das nicht dass der Koch schlecht ist (insbesondere falls es ein Lehrling ist), sondern dass das Rezept mit Salz besser wäre.

Daher habe ich auch unterschieden: falls du das als Aufgabe zum Lernen von JS ansiehst, ist eine iterative Vorgehensweise üblicherweise erfolgversprechender. Arbeite erst an den Grundlagen bevor du die Finessen reinbringst.
Falls das keine Übungsaufgabe ist, du also schon glaubst JS genügend zu beherrschen, ist es (aus meiner Sicht) hilfreich, auf die mehrfache Rad-Neu-Erfindung hinzuweisen, die du betreibst.

Debuggen [...] hatte aber damit bisher nichts am Hut
Sobald ein Fehler auftritt und du nicht sofort erkennst was die Ursache ist, musst du debuggen. Du hast es wahrscheinlich irgendwie schon gemacht, aber mglw. noch nicht die wichtigen Tools dafür entdeckt - daher mein Hinweis auf Firebug.


Duddle
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

die neu positionierte Kerze soll nicht mehr clonen. Jeder Nutzer sollte nur seine Kerze positionieren dürfen, aber dies solange, bis er die richtige Position gefunden hat, also mehrfach verschieben können (allerdings nur in diesem ersten Erstellungsprozess, nicht mehr nach Tagen). Weiteren Einfluß sollen keine Nutzer mehr haben (nicht löschen, etc.). Gut wäre aber, wenn der Admin im Nachhinein hierauf Einfluß nehmen könnte (muß aber nicht sein, denn ich könnte mir vorstellen, daß dies ziemlich schwierig ist).

Gruß Schippo
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

keine Sorge, ich habe das schon richtig aufgefaßt und kann auch mit Kritik gut umgehen. Ich bin Berliner, die sehen das alles nicht so verbissen und sind hart im Nehmen. Ich finde es gut, daß Du mich auf diese Dinge hinweist und auch Deine Art und Weise, die Dinge beim Namen zu nennen, und weiß es sehr zu schätzen. Findet man nicht so häufig im Netz!

Danke! Schippo
 

Schippo

Noch nicht viel geschrieben

Hallo Duddle,

kannst Du mir das Ding so fertig machen, daß alles funktioniert? Ich honoriere auch Deinen Aufwand. Habe schon nach PN geschaut, kann aber die Funktion hier im Forum nicht finden. Würde Dich gern per PN kontaktieren oder anderweitig. Kannst die Kontaktdaten aus meinem Forum verwenden.

Gruß Schippo
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben