10.01.2008, 19:29
|
|||
|
|||
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 
|
| Sponsored Links |
|
24.01.2008, 17:45
|
|||
|
|||
|
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)
|
| Sponsored Links |
|
25.01.2008, 10:41
|
||||
|
||||
|
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);
};
|
|
25.01.2008, 17:29
|
|||
|
|||
|
Ä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.
|
|
25.01.2008, 17:52
|
||||
|
||||
|
Du musst den Eventfunktionen das Eventobjekt übergeben, das passiert bei Inlineeventhandlern nicht automatisch.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
