Javascript / Ajax / DHTML / CSS Bei Problemen und Fragen zu den oben genannten Script-Sprachen, erhaltet ihr hier Hilfe. Ein kleines Forum für viele Sprachen :-)

Antwort
 
LinkBack Themen-Optionen Thema durchsuchen
Alt 27.05.2009, 18:24:27   #1 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard drag n drop

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.
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 28.05.2009, 20:42:20   #2 (permalink)
Forum-Freak
 
Benutzerbild von Sigi2006
 
Registriert seit: 26.07.2007
Ort: NRW
Geschlecht: maennlich
Beiträge: 1.201
Sigi2006 befindet sich auf einem aufstrebenden Ast
Full Time Killer Champion! Bug Attack Champion! HO Slappin Champion!
Tournaments Won: 1

Standard AW: drag n drop

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)
__________________
He is back: HTML, JavaScript und CSS Freak - Webdesigner - Immer über PN zu erreichen.

Geändert von Sigi2006 (28.05.2009 um 20:48:01 Uhr)
Sigi2006 ist offline   Mit Zitat antworten

Alt 29.05.2009, 15:04:15   #3 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard AW: drag n drop

Zitat:
Zitat von Sigi2006 Beitrag anzeigen
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>
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 30.05.2009, 14:56:11   #4 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard AW: drag n drop

hmm, das klappt immer noch nicht. Es ist einfach kein bild da.
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 30.05.2009, 15:54:02   #5 (permalink)
Forum-Freak
 
Benutzerbild von Sigi2006
 
Registriert seit: 26.07.2007
Ort: NRW
Geschlecht: maennlich
Beiträge: 1.201
Sigi2006 befindet sich auf einem aufstrebenden Ast
Full Time Killer Champion! Bug Attack Champion! HO Slappin Champion!
Tournaments Won: 1

Standard AW: drag n drop

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.
__________________
He is back: HTML, JavaScript und CSS Freak - Webdesigner - Immer über PN zu erreichen.

Geändert von Sigi2006 (30.05.2009 um 16:01:35 Uhr)
Sigi2006 ist offline   Mit Zitat antworten

Alt 31.05.2009, 11:59:42   #6 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard AW: drag n drop

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
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 01.06.2009, 16:34:30   #7 (permalink)
Forum-Freak
 
Benutzerbild von Sigi2006
 
Registriert seit: 26.07.2007
Ort: NRW
Geschlecht: maennlich
Beiträge: 1.201
Sigi2006 befindet sich auf einem aufstrebenden Ast
Full Time Killer Champion! Bug Attack Champion! HO Slappin Champion!
Tournaments Won: 1

Standard AW: drag n drop

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.
__________________
He is back: HTML, JavaScript und CSS Freak - Webdesigner - Immer über PN zu erreichen.
Sigi2006 ist offline   Mit Zitat antworten

Alt 01.06.2009, 16:55:40   #8 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard AW: drag n drop

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>
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 03.06.2009, 19:19:18   #9 (permalink)
Forum-Fan
 
Benutzerbild von nEmaTA
 
Registriert seit: 22.11.2008
Geschlecht: maennlich
Beiträge: 95
nEmaTA befindet sich auf einem aufstrebenden Ast

nEmaTA eine Nachricht über ICQ schicken
Standard AW: drag n drop

das funzt iwie aber immer noch nicht...
es ist einfach kein bild da, gar nichts.
__________________
Mit freundlichen Grüßen, nEmaTA.
nEmaTA ist offline   Mit Zitat antworten

Alt 04.06.2009, 21:08:06   #10 (permalink)
Forum-Freak
 
Benutzerbild von Sigi2006
 
Registriert seit: 26.07.2007
Ort: NRW
Geschlecht: maennlich
Beiträge: 1.201
Sigi2006 befindet sich auf einem aufstrebenden Ast
Full Time Killer Champion! Bug Attack Champion! HO Slappin Champion!
Tournaments Won: 1

Standard AW: drag n drop

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...
__________________
He is back: HTML, JavaScript und CSS Freak - Webdesigner - Immer über PN zu erreichen.
Sigi2006 ist offline   Mit Zitat antworten

Antwort

Themen-Optionen Thema durchsuchen
Thema durchsuchen:

Erweiterte Suche

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are aus
Pingbacks are aus
Refbacks are an

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Drop-Down-Navi thomaspahl PHP & MySQL 0 13.05.2008 15:54:13


Alle Zeitangaben in WEZ +1. Es ist jetzt 04:24:28 Uhr.


Powered by vBulletin® Version 3.7.4 (Deutsch)
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0
Daniel Minini NewYouth GmbH

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37