Bitte wähle

nEmaTA · 27.05.2009, 18:24:27

hallo zusammen.

Ich habe da eine Frage, wär echt nett, wenn die wer beantworten würde.

Ich hab ein Drag n Drop script gefunden:

HTML-Code:

<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
</body>
</html>

Nur Problem: Das zeigt nur spezielle Felder an, kann man damit auch Bilder drag n dropen?
zB:

HTML-Code:

<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;background-image:url(bar.gif)"> </div>

Aber irgendwie funktioniert das nicht. Und das is eben mein Problem

Mit freundlichen Grüßen.

Sigi2006 · 28.05.2009, 20:42:20

Also bei mir funktionierts, und wahrscheinlich liegt es bei dir einfach nur daran, dass du noch keine Höhe und Breite angegeben hast und die DIV daher 0 Pixel hoch und breit ist, und somit nicht sichtbar ist.

P.S.: Geiles Script, tut es in allen aktuellen Browsern:
FF 3.0.10
IE 8.0.6001.18702
Opera 9.64.10784
Safari 3.2.2 (552.28.1)

nEmaTA · 29.05.2009, 15:04:15

Zitat:

Zitat von Sigi2006

P.S.: Geiles Script, tut es in allen aktuellen Browsern:
FF 3.0.10
IE 8.0.6001.18702
Opera 9.64.10784
Safari 3.2.2 (552.28.1)

Ich weiß, ich hab auch ziemlich gestaunt.
Also, einfach dann so:

HTML-Code:

<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background-image:url(bar.gif)"> </div>

nEmaTA · 30.05.2009, 14:56:11

hmm, das klappt immer noch nicht. Es ist einfach kein bild da.

Sigi2006 · 30.05.2009, 15:54:02

Das Problem hatte ich seltsamerweise auch zunächst. Ich habe dann aber (Testhalber) auf dem PC das Bild in den selben Ordner verschoben und einfach nur als Namen referenziert, und dann gings. Das Script tut es aber:
wenn du z. B. einen Rahmen um die DIV hinzufügst (beim Style border: 1px solid black hinzufügen), dann siehst du, dass du die DIV sehr wohl erzeugst und verschiebst (nur ist weiß auf weiß natürlich nicht sichtbar)... Ich guck mal ob ich den Grund finde...

Sigi

EDIT: OK, bei mir gehts, man muss (unter Vista) nur daran denken, dass einige Ordner wie z. B. "Dokumente" oder auch "Bilder" bei Vista nur auf dem Bildschirm so heißen, im System aber mit "Documents" bzw. "Pictures" referenziert werden müssen.

nEmaTA · 31.05.2009, 11:59:42

ja, aber jetzt mach ich das auf 2page...
da kann ich ja keinen ordnerpfad hineinschreiben, funktionieren müsste es ja trotzdem, auch wenn ich nur die Bildadresse im

Code:

image-background:url(bla.gif)

einfüge.
lg

Sigi2006 · 01.06.2009, 16:34:30

Du musst da aber schon den kompletten Pfad einfügen, ne? Gib doch einfach mal exakt den Code, den du einbaust, ohne Beispiele, sondern mit allem was du nachher auch drin hast.

nEmaTA · 01.06.2009, 16:55:40

gut, das is jetzt der code, den ich bei mir drinnen habe:

HTML-Code:

<script type="text/javascript">


//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}
//-->
</script>

<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:100px;left:100px;height:320px;width:160px;background-image:url(http://www.2page.eu/userdaten2/004842/11/bilder/bannerfrei.jpg)"> </div>

nEmaTA · 03.06.2009, 19:19:18

das funzt iwie aber immer noch nicht...
es ist einfach kein bild da, gar nichts.

Sigi2006 · 04.06.2009, 21:08:06

Code:

<html>
<head>
<script type="text/javascript">


//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:100px;left:100px;height:320px;width:160px;background-image:url(http://www.2page.eu/userdaten2/004842/11/bilder/bannerfrei.jpg)"> </div>
</body>
</html>

... tuts bei mir perfekt...

Bitte wähle

Login für