drag and drop abspeichern

[Siegfried_D]

Hallo Leute,
hab ein kleineres Prog Problem und hoffe, dass mir jemand helfen kann:

Ich nutze folgendes Skript:
"<style>
.draggableElement {
position: absolute;
}
#d1 {
border: 2px solid green;
}
#d2 {
top: 0px; left: 300px;
}
</style>
<script>
var selectedElement;

function findDraggableElement (target) {
if (document.layers) {
if (target.constructor == Document) {
for (var l = 0; l < document.layers.length; l++)
if (target == document.layers[l].document)
return document.layers[l];
}
else if (target.constructor == Image) {
for (var l = 0; l < document.layers.length; l++)
for (var i = 0; i < document.layers[l].document.images.length; i++)
if (target == document.layers[l].document.images)
return document.layers[l];
}
return null;
}
else if (document.all) {
do
if (target.className == 'draggableElement&#39
return target;
while ((target = target.parentElement));
return null;
}
else if (document.getElementById) {
do
if (target.className == 'draggableElement&#39
return target;
while ((target = target.parentNode));
return null;
}
}

function checkSelection (evt) {
if (document.layers) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.all) {
selectedElement = findDraggableElement (event.srcElement);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.getElementById) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
}

function drag (evt) {
if (document.layers) {
selectedElement.left = evt.pageX;
selectedElement.top = evt.pageY;
}
else if (document.all) {
selectedElement.style.posLeft = event.clientX;
selectedElement.style.posTop = event.clientY;
}
else if (document.getElementById) {
selectedElement.style.left = evt.clientX + 'px';
selectedElement.style.top = evt.clientY + 'px';
}
}

function stopDrag (evt) {
if (document.layers) {
document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
else if (document.all || document.getElementById) {
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
}

if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = checkSelection;

if (document.all)
document.onselectstart = document.ondragstart = function () {
return false;
};
</script>

<div id="d1" class="draggableElement">
jswelt. immwer wieder neu, immer wieder gut.
</div>
<br>
<div id="d2" class="draggableElement">
jswelt. immwer wieder neu, immer wieder gut. die 2.
</div>"

Ich möchte nun folgendes realisieren:

ein Kunde gibt seine email Adresse an, schiebt dann die Grafiken dahin, wo er sie haben will und verändert die Farben über eine Farbskala ab.

Er schickt dann übern Formular ne Anfrage zu mir.
In der Anfrage soll aber auch die Grafik (mit den Veränderungen des Kunden ankommen.

1. Wie kann ich die Farben der Grafiken über ne Farbskala durch anklicken änderbar machen?
2. Wie kann ich die Positionen und Farben abspeichern, damit ich diese auch versenden kann?

Im Prinzip handelt es sich um eine Seite, auf welcher sich ein Kunde Visitenkarten selbst erstellen kann.

Für Hilfe wäre ich sehr dankbar, komme momentan nicht weiter...

Hoffe, meine anfrage ist verständlich!!

Danke

Siegfried

 

[Crazymind]

hallo

da hast du aber was vor

Hmm ich denke das man dies am besten mit Flash erstellt.
Auch nicht einfach, aber meineserachtens sinnvoller.

wenn du aber auf javascript bestehst, würd ich mir mal das AJAX framework Prototyp angucken. <-- dragable heisst die funktion glaube ich.

 

[Alain Aubert]

QUOTE Hmm ich denke das man dies am besten mit Flash erstellt.
Auch nicht einfach, aber meineserachtens sinnvoller.

Ich widerspreche.


QUOTE 1. Wie kann ich die Farben der Grafiken über ne Farbskala durch anklicken änderbar machen?

Gar nicht. Mir ist keine Technologie bekannt, mit der man Clientseitig in einem Browser ein Bild bearbeiten könnte. Es sei denn die Graphik besteht aus CSS. Kann SVG das? Du müsstest die Graphik an den Server schicken, sie bearbeiten (mit allen möglichen Farben oder on demand) und sie dem User wieder anzeigen.


QUOTE 2. Wie kann ich die Positionen und Farben abspeichern, damit ich diese auch versenden kann?

Du musst einfach die Position des Objektes an den Server schicken (Ajax). Die Speicherung dieser Daten kann weggelassen werden (RPC on Event) oder in globalen Javascript Variablen gespeichert werden.

Wieviel verstehst Du von Javascript? Du musst ein paar Grundlagen können und Ajax anwenden können um diese Aufgabe zu lösen. Ich empfehle allen keine Kundenaufträge anzunehmen, die sie nicht erledigen können, wenn sie nicht bereit sind ein Verlustgeschäft mit dem Auftrag zu machen.

Wenn Du nicht weisst, was Ajax ist, fang dort an. Selfhtml ist eine gute Quelle für Javascript.
Mit dem richtigen Ajax Framework - und JS - Kenntnissen kann man dieses Problem in sehr kurzer Zeit lösen.

Generelle Anmerkungen: Benutze

 für code und schick die Url der Seite mit.

 

[neuerBenutzer]

QUOTE (Crazymind @ Mo 26.3.2007, 9:31)Hmm ich denke das man dies am besten mit Flash erstellt.


Denke ich auch.

1.) Bei der Benutzung von Flash, für diese Aufgabe, kannst du mit so einer niedrigen FlashPlayer Version (4/5) arbeiten, das eigentlich alle Nutzer, die Flash aktiviert haben, eine funktionsfähige Version haben.

2.) Bei JavaScript ist meistens das Problem, das man eine "Anwendung" in bestimmten Bereichen mehrmals erstellen muss um alle gängigen Browser zu unterstützen.

 

[Crazymind]

QUOTE 1. Wie kann ich die Farben der Grafiken über ne Farbskala durch anklicken änderbar machen?

also mit flash wäre es möglich