zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden div per Drag&Drop verschieben und bei Klick ausserhalb schließen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2008, 19:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2006
Beiträge: 14
Juuro wird schon bald berühmt werden
Standard div per Drag&Drop verschieben und bei Klick ausserhalb schließen

Hallo allerseits,

es öffnet sich bei Klick auf einen Link (mittels jQuery) ein div das wie ein neues Fenster aussieht. Jetzt möchte ich, zwei Dinge:

1. Wenn man das div anklickt, soll man es verschieben können. Also zum so wie zum beispiel bei iGoogle.
2. Wenn man außerhalb von dem div irgendwohin klickt soll es sich schließen. So wie das z.B. das Lightbox-Plugin für Wordpress macht: Beispiel (aufs Bild klicken und dann ober- oder unterhalb des Kastens klicken)

Ja, ich habe schon versucht, in dem Lightbox-Plugin rumzusuchen um rauszufinden wie das da gemacht wird. Aber da ich nicht soo der JS-Pro bin hab ich da kaum was verstanden.

Vielleicht kann mir das hier jemand näherbringen...

Viele Grüße, Juuro
__________________
Zäsur kennste? Stecher von Kleopatra!

http://blog.twoseb.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.01.2008, 17:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2008
Ort: Berlin Mitte
Beiträge: 217
netbenni befindet sich auf einem aufstrebenden Ast
Standard

nimm das!
(habs aber noch nicht im FF getestet, im IE 6.0 funzts prima!)

Code:
<htmle><head>
<script type="text/javascript">
var md=false;
function moveIt(){
if(md){
with(elem.style){
position="absolute";
left=event.x-50   //nicht links-oben am Rand!
top=event.y-50	  ///
}}}
</script>
<style type="text/css">
#elem
{
   height:200px;
   width:200px;
   background:#9ab;
   border:solid 1px #456;
   padding:10px;
   cursor:pointer;
}
</style>
</head><body onmouseup="md=false">
<div id="elem" onmousemove="moveIt()" onmousedown="md=true" onmouseup="md=false">
<p>blabla</p>
</div>
</body>
</html>
__________________
„Tu soviel Gutes, wie Du kannst, und mache so wenig Gerede wie nur möglich darüber.“
C.D.

Geändert von netbenni (24.01.2008 um 17:47 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.01.2008, 10:41
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.921
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dann teste das mal im FF, ich kann dir aber schon sagen, ohne es selber getestet zu haben, das es nicht läuft.

Du musst einfach in dem Event rausfinden ob auf das Element geklickt wurde oder woanders hin. Welches Element angeklickt wurde ist leicht zu ermitteln:

Code:
window.document.onmousedown = function(e) {
	if(!e) e = window.event;
	var obj = e.target || e.srcElement;
	alert(obj.tagName);
};
Mit Zitat antworten
  #4 (permalink)  
Alt 25.01.2008, 17:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2008
Ort: Berlin Mitte
Beiträge: 217
netbenni befindet sich auf einem aufstrebenden Ast
Standard

Ähm, hab jetzt die Funktion in meinen <script>-Teil gepackt und erweitert:

window.document.onmousedown = function(e) {
if(!e) e = window.event;
var obj = e.target || e.srcElement;
if(obj.id=="elem"){md=true;moveIt();}
};

trotzdem gehts nich.
Was mach ich falsch?
__________________
„Tu soviel Gutes, wie Du kannst, und mache so wenig Gerede wie nur möglich darüber.“
C.D.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.01.2008, 17:52
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.921
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du musst den Eventfunktionen das Eventobjekt übergeben, das passiert bei Inlineeventhandlern nicht automatisch.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

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

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


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem im IE7: div hinter input platzieren per float Heavenfighter CSS 2 19.06.2007 15:50
per klick den Content ändern tilo.schumann CSS 4 30.04.2007 17:11
flexibles Div soll Div mit fester Breite links umfliessen? braindead CSS 3 23.09.2006 12:58
Die maximale breite wird nicht erkannt notebook20000 CSS 9 22.06.2006 20:14
Bilder per DIV / CSS schützen CSSHelp CSS 3 03.03.2006 15:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:36 Uhr.