BloodySword: DIV mit Maus verschieben, abern ur auf DIV-Fläche!

Beitrag lesen

SELF-Forum

DIV mit Maus verschieben, abern ur auf DIV-Fläche!

BloodySword
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln