nicht angemeldet
DIV mit Maus verschieben, abern ur auf DIV-Fläche!
Ich hab hier folgendes gefunden um DIV verschieben zu können:
http://www.quaese.de/HTML-Design/texte/js/scripts/drag_and_drop/drag_and_drop.html
Leider habe ich das Problem, wenn ich ein Button rein setzte, kann man beim Klicken in den Button das DIV auch verschieben.
Wie kann ich das umgehen?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 15 August 2007), see www.w3.org" />
<meta http-equiv="content-type" content=
"text/html; charset=windows-1250" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<title>
Testoberfläche
</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<script language="JavaScript" src="dragobj.js" type="text/javascript">
</script>
</head>
<body oncontextmenu="return false;" ondragstart="return false;"
onselectstart="return false;" onload="init();">
<div id="form" class="frm" onmousedown="startDrag(this);">
<div class="c1">
<p>
Dies ist eine Testoberfläche, die eine normale Programmoberfläche
emulieren soll. Wir testen das dann weiter ;o).
</p>
<p>
Jetzt kommt eine Menge Text um zu demonstrieren, wie man das mit dem
Scrollen in einem DIV macht. Wenn ich nur wüste, wie das geht... xDDD
</p>
<p>
Dieses Fensterchen kann man übrigens verschieben ^^.
</p>
</div>
<div class="c3">
<button
type="button"
class="c2"
onclick="getElementById('form').style.display='none';"
onmousedown="stopDrag();">OK</button>
</div>
</div>
</body>
</html>
-
http://www.quaese.de/HTML-Design/texte/js/scripts/drag_and_drop/drag_and_drop.html
na das kommt mir doch sehr bekannt vor - ein paar variablen umbenennen und passt schon :)
Wie kann ich das umgehen?
sorge dafür, dass das start-event prüft, ob du nicht grade auf ein anderes element geklickt hast, welches sich im verschiebbaren element befindet
-
http://www.quaese.de/HTML-Design/texte/js/scripts/drag_and_drop/drag_and_drop.html
na das kommt mir doch sehr bekannt vor - ein paar variablen umbenennen und passt schon :)
Wie kann ich das umgehen?
sorge dafür, dass das start-event prüft, ob du nicht grade auf ein anderes element geklickt hast, welches sich im verschiebbaren element befindet
Ich kann ja auch nichts dafür, hab einfach gegooglet und das war das erste was ich finden konnte.
Wie genau kann ich das nun prüfen?
Ich hab das nun anders gelöst: Ich habe einfach in dem DIV eine Titelleiste eingebaut, und nur mit der kann man das DIV verschieben.
Trotzdem würde ich es gerne in dem Javascript abfangen.
/* CSS Document */ body { margin: 0px 0px 0px 0px; cursor: default; font-family: tahoma; font-size: 8pt; background-color: buttonface; } div.c3 { position: absolute; bottom: 8px; right: 8px; } button.c2 { width: 80px; } div.c1 { position: absolute; left: 4px; top: 20px; right: 4px; bottom: 4px; } div.frm { position: fixed; left: 8px; top: 8px; width: 240px; height: 240px; border-width:1px; border-style:solid; border-color:buttonshadow; } div.titlebar { position: absolute; left: 0px; top: 0px; right: 0px; height: 16px; margin-top: 2px; margin-left: 2px; margin-right: 2px; margin-bottom: 2px; color: HighlightText; background-color: ActiveCaption; font-weight: bold; }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 15 August 2007), see www.w3.org" /> <meta http-equiv="content-type" content= "text/html; charset=windows-1250" /> <meta name="generator" content="PSPad editor, www.pspad.com" /> <title> Testoberfläche </title> <link rel="stylesheet" href="test.css" type="text/css" /> <script language="JavaScript" src="dragobj.js" type="text/javascript"></script> </head> <body oncontextmenu="return false;" ondragstart="return false;" onselectstart="return false;" onload="init();"> <div id="form" class="frm" > <div class="titlebar" onmousedown="startDrag(getElementById('form'));"> Testfenster </div> <div class="c1"> <p> Dies ist eine Testoberfläche, die eine normale Programmoberfläche emulieren soll. Wir testen das dann weiter ;o). </p> <p> Jetzt kommt eine Menge Text um zu demonstrieren, wie man das mit dem Scrollen in einem DIV macht. Wenn ich nur wüste, wie das geht... xDDD </p> <p> Dieses Fensterchen kann man übrigens verschieben ^^. </p> </div> <div class="c3"> <button type="button" class="c2" onclick="getElementById('form').style.display='none';" onmousedown="stopDrag();">OK</button> </div> </div> </body> </html>-
Ich kann ja auch nichts dafür, hab einfach gegooglet und das war das erste was ich finden konnte.
war auch kein vorwurf an dich - ich fands nur interessant
Wie genau kann ich das nun prüfen?
Ich hab das nun anders gelöst: Ich habe einfach in dem DIV eine Titelleiste eingebaut, und nur mit der kann man das DIV verschieben.
beim onmousedown wird die drag-start-funktion aufgerufen und das draggen beginnt
onclick wird aber erst ausgeführt, wenn die maustaste gedrückt und wieder losgelassen wird (im selben element)
du musst also beim klick auf den button vorher ebenfalls mit onmousedown prüfen obs der button ist und das drag-event wieder stoppen
-
Hi,
Ich hab das nun anders gelöst: Ich habe einfach in dem DIV eine Titelleiste eingebaut, und nur mit der kann man das DIV verschieben.
Trotzdem würde ich es gerne in dem Javascript abfangen.
du kannst das mousedown-Ereignis auf deinem Button abfangen und verhindern,daß es an das DIV weitergereicht wird. Versuch mal folgende Suchbegriffe:
Eventbubbling, Event-Propagation, stopPropagation, cancelBubble
gruß
peter
-
-